First, the common ground is saved in the browser side, and the same origin.

Cookie data is always carried (even if it is not needed) in the same HTTP request, i.e. cookies are passed back and forth between the browser and the server. Cookie data also has the concept of path, which can restrict cookies to a specific path. The storage size limit is also different, cookie data cannot exceed 4K, and because cookies are carried with each HTTP request, cookies are only suitable for storing very small data, such as session identifiers.

  1. SessionStorage and localStorage do not automatically send data to the server, only localStorage. SessionStorage and localStorage, while also limited in size, are much larger than cookies, reaching 5M or more.

  2. SessionStorage: valid only before the current browser window closes, so it will not last long; LocalStorage: always valid, saved even when the window or browser is closed and therefore used as persistent data; Cookies only remain valid until the set cookie expiration time, even if the window or browser is closed.

  3. Different scoped sessionstorages are not shared in different browser Windows, even on the same page; LocalStorage is shared in all origin Windows; Cookies are also shared across all the same origin Windows. The Web Storage supports the event notification mechanism to notify listeners of data updates. The API interface of Web Storage is easier to use.

  4. Web Storage benefits 1, reduce network traffic: once the data is saved in the local, you can avoid to the server to request data, so reduce unnecessary data requests, reduce the data between the browser and the server unnecessary back and forth transmission. 2, fast display data: good performance, read data from the local than through the network from the server to get data much faster, local data can be timely, coupled with the web page itself can also have cache, so the whole page and data are in the local words, can be displayed immediately. 3, temporary storage: many times the data only need to be used during the user browsing a group of pages, data can be discarded after closing the window, this situation is very convenient to use sessionStorage

Such as:

  1. Core 3 Steps: Create – Get – Clean (Recycle)

    sessionStorage.setItem("key"."123");     
 
sessionStorage.getItem("key");
 
sessionStorage.removeItem("key"); sessionStorage.clear(); // Clear allCopy the code

    Close the browser window

    localStorage.setItem("local"."123");
 
localStorage.getItem("local");
 
sessionStorage.setItem("session"."234");
 
sessionStorage.getItem("session")
Copy the code

    Close the browser window

  2. Main functions: The object used to store temporary information of the client [temporary data storage area, which can reduce the number of interactions with the server to a certain extent]

  3. Transfer object: string object of course, we can change its transfer object restrictions, such as to pass a JSON data, as shown in the following example:

    sessionStorage.setItem("key".'{"a":"1"}');
 
var jsonstr = sessionStorage.getItem("key");
 
var jsonval = JSON.parse(jsonstr);
 
console.log(jsonval["a"]); // The output is 1Copy the code

SessionStorage and page JS data object difference

  1. The lifetime of a normal JS object on a page is only valid for the current page, so the data does not exist when the page is reloaded, such as refreshing the page or going to another page.
  2. And sessionStorage as long as the same window, refresh the page or enter a different page of the same origin, data always exist, that is to say, as long as the browser is not closed, data still exist.

https://www.npmjs.com/package/store

Copy the code