web本地存储 sessionStorage 和 localStorage

Posted asimpleday

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了web本地存储 sessionStorage 和 localStorage相关的知识,希望对你有一定的参考价值。

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

 

以上是关于web本地存储 sessionStorage 和 localStorage的主要内容,如果未能解决你的问题,请参考以下文章

H5新增的Web Storage本地存储

localStorage 和 sessionStorage

THML5本地存储 Web Storage

H5本地存储:sessionStorage和localStorage

web本地存储(localStoragesessionStorage)

web本地存储(localStoragesessionStorage)