localStorage和sessionStorage在vue中如何使用
使用 Web Storage 存储的优势
Web Storage键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionStorage
区别
sessionStorage(临时存储) :关闭浏览器数据删除
localStorage(长期存储) :数据一直存在,除非手动删除
使用方法
这里 localStorage和sessionStorage的使用方法是一致的
localStorage.setItem(‘name’, “胡八一”); # 设置键值对,存储数据
注意value支持json格式
localStorage.getItem(‘name’); # 获取存储的数据
localStorage.removeItem(‘name’); # 删除数据
监听数据变化
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);
})