Vue中 localStorage的使用方法

最新推荐文章于 2026-03-26 19:12:53 发布

原创最新推荐文章于 2026-03-26 19:12:53 发布 · 3.3k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #javascript #js

本文详细介绍了在Vue中如何使用localStorage进行数据的保存、获取、更改、删除、清空和监听。同时，强调了localStorage在隐私模式下无法读取，且数据存储为字符串形式，有效期为永久。此外，提到了localStorage与sessionStorage的区别，包括存储容量、有效期和作用域等。

1.保存

localStorage.setItem('accessToken', 'Bearer ' + response.data.result.accessToken)

2.获取

localStorage.getItem('accessToken')

3.更改

localStorage.setItem('accessToken', '更改后' + response.data.result.accessToken)

4.删除

 localStorage.removeItem('accessToken')

5.清空

localStorage.clear()

6.监听

//Storage 发生变化（增加、更新、删除）时的 触发，同一个页面发生的改变不会触发，只会监听同一域名下其他页面改变 Storage
window.addEventListener('storage', function (e) {
　　console.log('key', e.key); console.log('oldValue', e.oldValue);
　　console.log('newValue', e.newValue); console.log('url', e.url);
})

注意

localStorage在浏览器的隐私模式下面是不可读取的。
localStorage本质上是对字符串的读取，有json格式时需要JSON.stringify()转化为字符串。
localStorage有效期是永久的。一般的浏览器能存储的是5MB左右。sessionStorage api与localStorage相同。
sessionStorage默认的有效期是浏览器的会话时间。
localStorage作用域是协议、主机名、端口。（理论上，不人为的删除，一直存在设备中）
sessionStorage作用域是窗口、协议、主机名、端口。
localStorage是window上的。所以不需要写this.localStorage。Vue中的this，指向Vue实例。