LocalStorage usage and localstorage usage

LocalStorage usage and localstorage usage

1. What is localStorage?

In HTML5, a new localStorage feature is added, which is mainly used as local storage, solve the problem of insufficient cookie storage space (the storage space of each cookie in the cookie is 4 k). In localStorage, browsers generally support 5 MB of size, localStorage varies in different browsers.

Ii. advantages and limitations of localStorage

Advantages of localStorage

1. localStorage expands the cookie's 4 K limit

2. localStorage can directly store the data requested for the first time locally. This is equivalent to a database of 5 MB in size for the front-end page, which can save bandwidth compared with cookies, however, this is only supported by browsers of the higher version.

Limitations of localStorage

1. the browser size is not uniform, and the localStorage attribute is supported only in IE Versions later than IE8.

2. Currently, all browsers limit the value type of localStorage to the string type, which requires some conversions for common JSON object types.

3. localStorage is not readable in the browser's privacy mode.

4. localStorage is essentially a string reading function. If the storage content is large, the memory space will be consumed, resulting in page card-changing.

5. localStorage cannot be crawled by crawlers.

The only difference between localStorage and sessionStorage is that localStorage is a permanent storage, and sessionStorage is used to clear key-value pairs in sessionStorage when the session ends.

Iii. Use of localStorage

Clear localStorage

LocalStorage. clear () // undefined localStorage // Storage {length: 0} stores data

Store Data

LocalStorage. setItem ("name", "caibin") // store the localStorage variable whose name is caibin. name = "caibin"; // equivalent to the above command localStorage // Storage {name: "caibin", length: 1} Read data

Read data

LocalStorage. getItem ("name") // caibin, reads the value of the variable named name stored in the localStorage object localStorage. name // "caibin" localStorage. valueOf () // read all data stored in localStorage. key (0) // The variable name (key value) for reading the first data // traverse and output the name and value stored in localStorage for (var I = 0; I <localStorage. length; I ++) {console. log (the name of the '+ I +' data stored in 'localstorage is '+ localStorage. key (I) + ', value:' + localStorage. getItem (localStorage. key (I )));}

Delete a variable

LocalStorage. removeItem ("name"); // undefinedlocalStorage // Storage {length: 0} You can see that the previously saved name variable has been deleted from localStorage

Check whether a variable is saved in localStorage.

// All the data is tested. It is in my current environment. It's just a demo ~ LocalStorage. hasOwnProperty ('name') // truelocalStorage. hasOwnProperty ('sex') // false

Convert the array into a local string

var arr = ['aa','bb','cc']; // ["aa","bb","cc"]localStorage.arr = arr //["aa","bb","cc"]localStorage.arr.toLocaleString(); // "aa,bb,cc"

Store JSON in localStorage

Var students = {xiaomin: {name: "xiaoming", grade: 1}, teemo: {name: "teemo", grade: 3} students = JSON. stringify (students); // convert JSON into a string and store it in the variable console. log (students); localStorage. setItem ("students", students); // Save the variable to localStorage var newStudents = localStorage. getItem ("students"); newStudents = JSON. parse (students); // convert to JSONconsole. log (newStudents); // print the original object

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.