Storing data in the browser

We can store and manipulate the info within the browser. It is called client-side storage. It is useful when it’s not necessary or practical to send it to the webserver. Web browsers support a variety of ways for internet sites to store data on the user’s computer.

Options for storing browser data:

1. Cookies: Cookies are stored directly in the browser in the form of small strings. It is the foremost efficient method of remembering and tracking preferences, commissions, and other information required for a better visitor experience or site statistics.

   This is an area of the HTTP protocol. By using the Set-Cookie HTTP header, the webserver sets the cookies. Then, the browser automatically adds cookies to every request on the same domain using this HTTP header.

   By using property, we will also access cookies from the browsers:
   Writing and Reading data to cookies:

   Reading data from cookies: We can write cookies by using document.cookies, in the pair of name = value delimited by ; . document.cookies is an accessor to set and get the cookies. it does not overwrite the other cookies, only set the mentioned cookies.
   For example :
document.cookie = "user=Jon Smith"; update only user cookie.
alert(document.cookie); // it will show all cookies.

   To find a specific cookie, we can split document.cookie by ; . We can use either regular expression or array functions to get the particular output.

   Cookies have several options, many of which are important. The options are listed after key=value, delimited by ;.
   document.cookie = "user=Jon Smith; path=/; expires=Wed, 21 Jan 2022 03:14:07 GMT"

   path(path=/mypath): The URL path prefix must be absolute. It makes the cookie accessible for pages under a given path. By default, it’s the current path.
   If we set a cookie with path=/adminPage, it’s visible only at given pages. By other pages like /adminPage/something, but not at /home or any other Page. We should set a path to the root, for example, path=/ to make the cookie accessible from all website pages.

   domain (domain=site.com): A domain defines where we can access the cookies. By default, a cookie is accessible only at the domain that set it. So, if the cookie was set by example.com, we won’t get it at other.com, not even on the subdomain.
   // at example.com
document.cookie = "user=Jon"
// at subdomain.example.com
alert(document.cookie); // no user

   But if we would like to cookies accessible by its subdomain also, we can do this by using the way:
   // at example.com site
// make the cookie accessible on any subdomain *.examples.com:
document.cookie = "user=Jon; domain=*.examples.com"
// later
// at subdomian.example.com
alert(document.cookie); // has cookie user=John

   expires, max-age: By default, it disappears when the browser is closed. These cookies are called “session cookies”.
   expires=Tue, 19 Jan 2038 03:14:07 GMT

   The cookie expiration date is the time when the browser will automatically expire this data. And We will not be able to get this data after the given date.
   For example
// cookie will die after given time from now
document.cookie = "user=Jon Smith; max-age=3600";
// To delete the cookies now
document.cookie = "user=Jon Smith; max-age=0";

   Secure: With this option, if a cookie is set by https://example.com, then it doesn’t appear when the same site is accessed by HTTP, as http://example.com.
   So if a cookie has delicate content that we don’t want to send over unencrypted HTTP, then we can use a secure flag to do so.
   // assuming we are on https:// now
document.cookie = "user=Jon Smith; secure";

   Cookies Limitation:

   There are some limitations while using cookies

   • The pair(key = value), after encodeURIComponent, should not exceed 4KB. So we can’t store large data in a cookie.
   • The number of cookies per domain is limited and the exact limit depends on the browser.
2. LocalStorage, sessionStorage: localStorage and sessionStorage are web storage objects that allow you to save key/value pairs in the browser. Data only exists a page refresh (for sessionStorage) and even a full browser restart (for localStorage). We’ll see that very soon.

   When we already have cookies then, why additional objects?

   • Web storage objects aren’t sent to the server with every request. Because of that, we will store far more. Most browsers allow a minimum of 2 megabytes of knowledge (or more) and have settings to configure that.
   • Manipulate storage objects via HTTP headers. Everything is done within JavaScript.
   • The storage is sure to the origin (domain/protocol/port triplet). i.e. different protocols or subdomains deduce different storage objects, they can not approach data from one another.

   Methods and Properties for LocalStorage, sessionStorage :

   setItem(key, value): To store the data in the form of key/value pair.
   localStorage.setItem('test', 1);
sessionStorage.setItem('test', 1);

   getItem(key): To get the value with the help of key.
   alert( localStorage.getItem('test') )
alert( sessionStorage.getItem('test') );

   removeItem(key): To remove the key by its value.
   localStorage.removeItem("mytime");
sessionStorage.removeItem("mytime");

   Clear: To delete everything in localStorage and SessionStorage.
   localStorage.clear()
sessionStorage.clear()

   key(index): To get the key on a given position.
   localStorage.key(0);
sessionStorage.key(0);

   length: the number of stored items.
   localStorage.length;
sessionStorage.length;

3. IndexDB: IndexedDB is much more powerful than cookies and localStorage.It is a database that is built into a browser to store the data. That power is usually immoderate for traditional client-server apps.
   • It stores any kind of data with values by keys, multiple key types.
   • It also supports transactions.
   • It supports key range queries and indexes.
   • It can store much bigger volumes of data than localStorage and cookies.

   To start working with IndexedDB, we first need to connect to a database.
   The syntax:
let openRequestForindexDB = indexedDB.open(name, version);

   Name: It is used for the database name. We can use many databases with different names, but all of them exist within the current origin. websites can’t access other websites’’ databases.
   Version: it has an integer value and by default, its value is 1.

   The call returns the openRequestForindexDB object, we should listen to events on it:

   • success: It indicates that the database is ready, there’s the “database object” in openRequestForindexDB.result, we should use it for further calls.
   • error: opening failed.
   • upgradeneeded: database is ready but we need to update the version for the database.

   let openRequestIndexDB = indexedDB.open("store", 1);
openRequestIndexDB.onupgradeneeded = function() {
// ...perform initialization...
};
openRequestIndexDB.onerror = function() {
console.error("Error", openRequestIndexDB.error);
};
openRequestIndexDB.onsuccess = function() {
let db = openRequestIndexDB.result;
};

   To delete Database:
   let deleteRequest = indexedDB.deleteDatabase(name);

StudySection provides a big list of certification exams through its online platform. The French Certification Exam can help you to certify your skills to communicate in the French language. Whether you are new to the language or you are an expert in it, this French certification exam can test the ability of anybody’s command over the French language.

Share this...

Facebook

Twitter

Linkedin