Html5 localStorage入门教程

2024-09-05 07:19:25

字体：大中小

来源：转载

供稿：网友

定义

只读的 localStorage 允许你访问一个 Document 的远端（origin）对象 Storage；数据存储为跨浏览器会话。localStorage 类似于 sessionStorage，区别在于，数据存储在 localStorage 是无期限的，而数据存储在 sessionStorage 会被清除，当页面会话结束时——也就是说当页面被关闭。

属性

length

localStorage 内键值对的数量。

localStorage.length // 0localStorage.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') // mazeylocalStorage.getItem('age') // 23localStorage.getItem('sex') // null

等同于：

localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage.name // mazeylocalStorage['age'] // 23localStorage.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') // undefinedlocalStorage // {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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：在HTML5 canvas里用卷积核进行图像处理的方法

下一篇：如何使用localstorage代替cookie实现跨域共享数据问题

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注