Html5 localStorage Getting Started Tutorial

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 data stored in localStorage is indefinite, while data stored in sessionStorage will be cleared when the page session ends - that is, when the page is closed.

The number of key-value pairs in localStorage.

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

Add/update localStorage key-value pairs.

 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}

Gets the value of the specified key in 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

Removes the key-value pair for the specified key from 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

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}

localStorage can only store strings, so complex values ​​such as arrays/objects must be converted into strings using JSON.stringify() first, and then used JSON.parse() to convert them into complex values ​​before use.

 let arr = [1, 2, 3]localStorage.setItem('arr', arr)localStorage.getItem('arr') // 1,2,3// JSON.stringify()localStorage.setItem('arr', JSON.stringify(arr))localStorage.getItem('arr') // [1,2,3]JSON.parse(localStorage.getItem('arr')) ​​// [1, 2, 3]

Let the window monitor the storage of localStorage. When the localStorage of a label changes, other labels respond accordingly.

test0.html - Change localStorage.

 <input type=text id=input /><button onclick=setNameForStorage()>Set</button><script type=text/javascript> function setNameForStorage () { localStorage.name = document.querySelector('#input'). value }</script>

test1.html - responds to localStorage changes.

 <script type=text/javascript> window.addEventListener('storage', e => { console.log(e.key, e.newValue) // name 123 })</script>

1. localStorage can only be used under the same domain name, and can be used with postMessage and iframe to achieve cross-domain communication.
2. Lower versions of IE do not support localStorage.
3. It needs to be used in a server environment, that is, it cannot be used in abnormal environments such as file://.
4. Unpredictable problems may occur in mobile localStorage (H5, IOS, Android).

Please Stop Using Local Storage

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.