Html5 localStorage入门教程

这篇文章主要介绍了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。

test1.html - 响应 localStorage 的改变。

注意