Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to use localStorage in Html5". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to use localStorage in Html5" can help you solve the problem.

Define

Read-only localStorage allows you to access a Document origin object Storage; data store as a cross-browser session. LocalStorage is similar to sessionStorage, except that data is stored indefinitely in localStorage, while data storage in sessionStorage is cleared when the page session ends-that is, when the page is closed.

Attribute

Length

The number of localStorage internal key value pairs.

LocalStorage.length / / 0localStorage.setItem ('name',' mazey') localStorage.length / / 1

Method

1.setItem (key, value)

Add / update key-value pairs for localStorage.

LocalStorage.setItem ('name',' mazey') localStorage.setItem ('age',' 23') localStorage / / Storage {age: "23", name: "mazey", length: 2}

Equivalent to:

LocalStorage.name = 'mazey'localStorage.age =' 23'localStorage / / Storage {age: "23", name: "mazey", length: 2}

2.getItem (key)

Gets the value of the specified key in the localStorage.

LocalStorage.setItem ('name',' mazey') localStorage.setItem ('age',' 23') localStorage.getItem ('name') / / mazeylocalStorage.getItem (' age') / / 23localStorage.getItem ('sex') / / null

Equivalent to:

LocalStorage.setItem ('name',' mazey') localStorage.setItem ('age',' 23') localStorage.name / / mazeylocalStorage ['age'] / / 23localStorage.sex / / undefined

3.removeItem (key)

Removes the key-value pair of the specified key in the localStorage.

LocalStorage.setItem ('name',' mazey') localStorage.setItem ('age',' 23') localStorage / / Storage {age: "23", name: "mazey", length: 2} localStorage.removeItem ('age') / / undefinedlocalStorage / / {name: "mazey", length: 1} localStorage.removeItem (' age') / / undefined

4.clear ()

Clear all key-value pairs in localStorage.

LocalStorage.setItem ('name',' mazey') localStorage.setItem ('age',' 23') localStorage / / Storage {age: "23", name: "mazey", length: 2} localStorage.clear () localStorage / / Storage {length: 0}

Access object (complex value)

LocalStorage can only store strings, so complex values such as arrays / objects are first converted to strings with JSON.stringify (), and then converted to complex values with JSON.parse () when taken out.

Let arr = [1 arr', arr 2 arr'] localStorage.setItem ('arr') localStorage.getItem (' arr') / / "1 arr 2 localStorage.setItem ('arr', JSON.stringify (arr)) localStorage.getItem (' arr') / /" [1 localStorage.getItem ('arr')] JSON.parse (localStorage.getItem (' arr')) / / [1 mei 2 arr') / /

Communicate before browser tags

Let window listen on the storage of localStorage, and when the localStorage of one tag changes, other tags respond accordingly.

Test0.html-change the localStorage.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.