sessionStorage 、localStorage 和 cookie

localStorage 和 sessionStorage

HTML5 provides two new methods for storing data on the client side: localStorage and sessionStorage; both are stored only on the client side (ie the browser) and do not participate in communication with the server 

1. sessionStorage (temporary storage): maintains a storage area for each data source, which exists during the opening of the browser, including page reloading, and is cleared when the browser is closed
2. localStorage (long-term storage): the same as sessionStorage, but the data will still exist after the browser is closed

1. Save data to local

The usage of sessionStorage and localStorage is basically the same, and the value of reference type should be converted into JSON

localStorage.setItem("key", "value");//key is the name of the stored data, similar to the name in var name="Char". Or localStorage.key="value";//Similar to the operation method of the object

2. Get data from local storage

var value=sessionStorage.getItem("key"); // value is the stored value 
var value=localStorage.getItem("key"); // value is the stored value

 

3. Delete a saved data from local storage

   sessionStorage.removeItem('key');
   localStorage.removeItem('key');

4. Delete all saved data

  sessionStorage.clear();
  localStorage.clear();

5. Monitor local storage changes

Triggered when Storage changes (add, update, delete), changes to the same page will not be triggered, only other pages under the same domain name will be monitored to change Storage

6. Provides keymethods for traversing

function showStorage(){
    for(var i=0;i<localStorage.length;i++){
        //key(i) gets the corresponding key, and then use the getItem() method to get the corresponding value
        console.log(localStorage.key(i),
                localStorage.getItem(
                        localStorage.key(i)));
    }
}

　　

First, the difference between sessionStorage, localStorage and cookies

Common point: They are all saved on the browser side and are of the same origin.

the difference:

1. The storage location is different:

Cookie: The data is always carried in the same-origin http request (even if it is not needed), that is, the cookie is passed back and forth between the browser and the server; at the same time, the cookie can be restricted to only belong to a certain path.

sessionStorage, localStorage: Data will not be automatically sent to the server, but only stored locally.

2. The storage size is different:

Cookie: Only suitable for saving small data (because each http request will carry a cookie), such as session ID.

sessionStorage and localStorage: Although there is also a storage size limit, it is much larger than cookies.

3. The data validity period is different:

sessionStorage: only valid until the current browser window is closed;

localStorage: always valid, the window or browser is also always saved, so it is used as persistent data;

Cookies: Only valid until the set cookie expiration time, even if the window or browser is closed.

4. The scope is different:

sessionStorage : not shared between different browser windows, even the same page;

localStorage: shared among all windows of the same origin;

cookie: Shared across all windows of the same origin.

Second, the difference between cookies and sessions: 

1. The session is stored on the server, and the client does not know the information; the cookie is stored on the client, and the server can know the information. 

2. Objects are stored in session, and strings are stored in cookies 

3. Sessions cannot distinguish paths. During the same user's visit to a website, all sessions can be accessed anywhere.

   If the path parameter is set in the cookie, then the cookies under different paths in the same website cannot access each other.

* sessionStorage 、localStorage 、session、cookie *

In short:

　　localStorage: browser-side persistent storage, still exists when browsing is closed, up to 5MB (basically no limit)
　　sessionStorage: browser-side memory storage, when the browser is closed, there is no
　　session: server-side creation, server-side storage, dependent on cookies
　　cookie: Created on the server side, saved on the browser side, the request carries the corresponding cookie, the length and number are limited (4kb)