What is the usage of localstorage?

localstorage usage: 1. localStorage expands the 4K limit of cookies; 2. localStorage can directly store the first requested data locally, which is equivalent to a 5M database for front-end pages. .

【Related article recommendations: vue.js】

localstorage usage:

1. What is localStorage and sessionStorage

In HTML5, a new localStorage feature has been added. This feature is mainly used as local storage. It solves the problem of insufficient cookie storage space (the storage space of each cookie in the cookie is 4k). Generally, browsers support a size of 5M in localStorage. This will be different in localStorage in different browsers.

In HTML5, local storage is a window attribute, including localStorage and sessionStorage. You can clearly identify the difference between the two from their names. The former always exists locally, while the latter only accompanies the session. Once the window is closed it is gone. The following is the difference between localStorage and sessionStorage

(1)localStorage and sessionStorage are both objects used to store temporary information on the client.

(2) They can only store objects of string type (although other native types of objects can be stored in the specification, but so far no browser has implemented it).

(3) The localStorage life cycle is permanent, which means that unless the user clears the localStorage information on the UI provided by the browser, the information will exist forever.

(4) The sessionStorage life cycle is the current window or tab. Once the window or tab is permanently closed, all data stored through sessionStorage will be cleared.

(5) Different browsers cannot share information in localStorage or sessionStorage. Different pages in the same browser can share the same localStorage (the pages belong to the same domain name and port), but sessionStorage information cannot be shared between different pages or tabs. It should be noted here that pages and tabs only refer to top-level windows. If a tab contains multiple iframe tags and they belong to the same source page, sessionStorage can be shared between them.

2. Advantages and limitations of localStorage

Advantages of localStorage

1. localStorage expands the 4K limit of cookies

2 . LocalStorage can store the first requested data directly to the local. This is equivalent to a 5M database for front-end pages. Compared with cookies, it can save bandwidth, but this is only available in high-end browsers. Limitations of

localStorage supported by Zhongcai

1. Browser sizes are not uniform, and the localStorage attribute is only supported in IE versions above IE8

2. Currently all All browsers will limit the value type of localStorage to string type, which requires some conversion for our daily common JSON object types

3. localStorage is not readable in the privacy mode of the browser

4. LocalStorage essentially reads strings. If there is a lot of stored content, it will consume memory space and cause the page to become stuck.

5. LocalStorage cannot be crawled by crawlers

The only difference between localStorage and sessionStorage is that localStorage is a permanent storage, while sessionStorage is a permanent storage. When the session ends, the key-value pairs in sessionStorage will be cleared.

Here we use localStorage to analyze

3. Use of localStorage

First of all, when using localStorage, we need to determine whether the browser supports the localStorage attribute

 if(！window.localStorage){
   alert("浏览器支持localstorage");
    return false;
 }else{
   //主逻辑业务
}

localstorage Storage

For example, if you want to store personal school information now, you can write it like this:

var requesteducatData = {
    "school": '吉林大学',
    "startSchoolTime": '2015',
    "finishSchoolTime": '2019',
    "schoolTypeId": '大学',
};
    window.localStorage.setItem('educatList', JSON.stringify(requesteducatData));//对象转字符串

The result after running is as follows:

Related free learning recommendations: JavaScript(Video)

The above is the detailed content of What is the usage of localstorage?. For more information, please follow other related articles on the PHP Chinese website!