Html5 localStorage入门教程

只读的 localStorage 应承你会见一个 Document 的远端（origin）工具 Storage；数据存储为跨赏识器会话。localStorage 相同于 sessionStorage，区别在于，数据存储在 localStorage 是无穷期的，而数据存储在 sessionStorage 会被破除，当页面会话竣事时——也就是说当页面被封锁。

属性

length

localStorage 内键值对的数目。

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

要领

1.setItem(key, value)

新增/更新 localStorage 的键值对。

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

等同于：

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

2.getItem(key)

获取 localStorage 中指定键的值。

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

等同于：

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

3.removeItem(key)

移除 localStorage 中指定键的键值对。

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

4.clear()

清空 localStorage 中全部键值对。

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

存取工具（伟大值）

localStorage 只能存字符串，以是数组/工具等伟大值要先用 JSON.stringify() 转换成字符串，取出来时再用 JSON.parse() 转换成伟大值再行使。

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]

赏识器标签之前通讯

让 window 监听 localStorage 的 storage，一个标签的 localStorage 产生改变时，其余标签做出响应的相应。

test0.html - 改变 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 - 相应 localStorage 的改变。

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

留意

localStorage 只能同域名下行使，可以搭配 postMessage 和 iframe 实现跨域通讯。

低版本IE不支持 localStorage。

需在处事器情形下行使，即不能在 file:// 等非正常情形下行使。

在移动端 localStorage（H5, IOS, Android）会产生不行预知的题目。

其余

Please Stop Using Local Storage

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!