Vue localStorage使用

localStorage

#1 环境

"vue": "^2.5.2",
"axios": "^0.19.0",
"vue-axios": "^2.1.4",
"vue-router": "^3.0.1"

#2 使用

1. localStorage有效期是永久的。一般的浏览器能存储的是5MB左右。sessionStorage api与localStorage相同。
2. sessionStorage默认的有效期是浏览器的会话时间（也就是说标签页关闭后就消失了）。
3. localStorage作用域是协议、主机名、端口。（理论上，不人为的删除，一直存在设备中）
4. sessionStorage作用域是窗口、协议、主机名、端口。

#2.1 保存

//对象
const infoobj = { name: 'hou', age: 24, id: '001' };
 
//字符串
const mystr="haha";
 
localStorage.setItem('min', JSON.stringify(infoobj));
 
localStorage.setItem('hang', mystr);

#2.2 获取

var data1 = JSON.parse(localStorage.getItem('min'));
 
var data2 = localStorage.getItem('hang');

#2.3 删除

//删除某个
localStorage.removeItem('min');

//删除所有
localStorage.clear();

2.4 监听

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);
})

#3 用途

存储登录后的信息, 如TOKEN, 在成功登录后, 将TOKEN存到localStorage,每次向后端发请求,带上localStorage的数据

---