web本地存储 sessionStorage 和 localStorage

Posted 2020-10-28 asimpleday

1、sessionStorage  临时存储

为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载。

 

2、localStorage 长期存储

与sessionStorage一样，但在浏览器关闭之后，数据依然会一直存在

 

保存数据到本地

var userInfo={
      name:"张三",
      age:24,
      likes:"song"
}
sessionStorage.setItem("key",JSON.stringify(userInfo));
localStorage.setItem("key",JSON.stringify(userInfo)); 

 

从本地存储获取数据

var data1=JSON.parse(sessionSrorage.getItem("key"));
var data2=JSON.parse(localStorage.getItem("key"));

 

本地存储中删除某个保存的数据

sessionSrorage.removeItem("key");
localStorage.removeItem("key");

 

删除所有保存的数据

sessionSrorage.clear();
localStorage.clear();

 

监听本地存储的变化

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