window.localStorage.setItem的理解与使用

最近接触的一个小项目中频繁看到一个新的面孔：

 changeTheme () {
      dispatch({ type: 'app/switchTheme' })
    },
    changeOpenKeys (openKeys) {
      window.localStorage.setItem(`${prefix}navOpenKeys`, JSON.stringify(openKeys))
      dispatch({ type: 'app/handleNavOpenKeys', payload: { navOpenKeys: openKeys } })
    },
  }

虽然字面上理解了window.localStorage.setItem的意思，但是对其用法不甚理解。所以找了一些文档，将自己的理解整理下来：

针对上面的这个部分，这段代码可以缓存当前页面的停留的子页面和展开的数据，当切换出去该页面再回来的时候，展示的仍然是离开时的页面和数据。

HTML5种的web storage包含两种存储方式：localStorage和sessionStorage，这两种方式存储的数据不会自动发给服务器，仅仅是本地保存，有大小限制。

localStorage是持久化的本地保存，只要你找不到其所在地没有主动删掉，就会一直存在。就像一些缓存，都把APP删了还有。

sessionStorage是会话级别的本地保存，比如一个页面关闭的时候该页面设置的sessionStorage数据会自动消失，在不同浏览器窗口不会共享的，即使是同一个浏览器的同一个页面。根Java里面的会话有点类似的。

window.localStorage.setItem(key,value);//设置指定key的数据（JSON格式）

window.localStorage.getItem(key);//获取指定key的数据
window.localStorage.removeItem(key);//删除指定key的数据

window.localStorage.clear();//清空所有的存储数据



window.sessionStorage.setItem(key,value);

window.sessionStorage.getItem(key);

window.sessionStorage.removeItem(key);

window.sessionStorage.clear();

应该还有更深的理解。待续。

 

-----------------------------------------------------------continue--------------------------------------------------------------------------------

localStorage其他注意事项

一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式

这个时候我们可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串

示例：

if(!window.localStorage){
    alert("浏览器支持localstorage");
}else{
    var storage=window.localStorage;
    var data={
        name:'taytay',
        sex:'woman',
        hobby:'program'
    };
    var d=JSON.stringify(data);
    storage.setItem("data",d);
    console.log(storage.data);
}

读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法

var data={
    name:'taytay',
    sex:'woman',
    hobby:'program'
};
var d=JSON.stringify(data);
window.localStorage.setItem("data",d);
//将JSON字符串转换成为JSON对象输出
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj);

 
打印出来是Object对象

另外还有一点要注意的是，其他类型读取出来也要进行转换.......

参考链接： https://www.cnblogs.com/st-leslie/p/5617130.html 
https://www.cnblogs.com/wdlhao/p/4494624.html