The master explains localstorge and seesionstorage in detail for you

The content this article brings to you is about localstorage and seesionstorage. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. [Advance Tutorial: Html5 Tutorial]

The sessionStorage property allows you to access a session Storage object. It is similar to localStorage, except that the data stored in localStorage does not have an expiration time setting, while the data stored in sessionStorage will be cleared when the page session ends. The page session is maintained while the browser is open, and reloading or restoring the page will maintain the original page session. Opening a page in a new tab or window initializes a new session, which is different from the way session cookies work.

Read-only localStorage allows you to access a Document's remote (origin) object Storage; data is stored as a cross-browser session. localStorage is similar to sessionStorage. The difference is that the data stored in localStorage is indefinite, and when the page session ends - that is, when the page is closed, the data stored in sessionStorage will be cleared.

Simply speaking, localStorage is a browser persistent storage solution, and sessionStorage is different from session in that it only exists in one page. SessionStorage will be reset when a new page is opened. It should be noted that whether the data is stored in localStorage or sessionStorage, they are specific to the protocol of the page

Basic usage

First let's take a look at the operation of sessionStorage

1. Save data to sessionStorage sessionStorage.setItem('key', 'value');

2. Get data from sessionStorage

var sessionData = sessionStorage.getItem('key');

3. Delete saved data from sessionStorage

sessionStorage.removeItem('key');

4. Removing all

sessionStorage.clear();

The same localStorage has a similar operation

1. Save data

localStorage.setItem(`key`, `value`);

2. Get data

let cat = localStorage.getItem(`key`);

3. Delete a single Data

localStorage.removeItem(`key`);

4. Remove all

localStorage.clear();

You can use localStorage.length to get the number of key-value pairs in localStorage. You can also use the localStorage.key() method to traverse localStorage storage. key value.

storage event

When the stored data changes, the storage event will be triggered. But it should be noted that it is different from the click event that captures and bubbles up. The storage event is more like a notification and cannot be canceled. Triggering this event will call the storage event of other windows in the same domain, but the window that triggers storage (that is, the current window) will not trigger this event. The common attributes of storage's event object are as follows (the current window does not trigger, other windows will trigger).

The common properties of changeEvent are as follows:

oldValue：更新前的值。如果该键为新增加，则这个属性为null。
newValue：更新后的值。如果该键被删除，则这个属性为null。
url：原始触发storage事件的那个网页的网址。
key：存储store的key名

The above is the detailed content of The master explains localstorge and seesionstorage in detail for you. For more information, please follow other related articles on the PHP Chinese website!