localStorage、sessionStorage、cookie使用注意

一、localStorage，sessionStorage，cookie的简单介绍

localStorage:仅在客户端存储不参与服务器通信，存储大小一般为5M，如果不是人为清除，那么即使是关闭浏览器也会一直存在。

sessionStorage:仅在客户端存储不参与服务器通信，存储大小一般为5M，会话级存储，也就是说如果关闭当前页面或者浏览器那么就会清除

cookie:客户端存储，参与服务器通信，存储大小为4k,可设置生命周期，在设置的生命周期内有效

二、localStorage的优势及其注意点

在存储方面localstorage和sessionStorage具有巨大优势，大小为5M，比cookie大多了，所以可以用localStorage来做一些相对不太会改变的数据缓存或者说可以缓存用户的足迹，换个说法，localStorage是一个小型的数据库

注意点：

1、兼容性

2、localStorage的值为string类型

if(！window.localStorage){
   alert(“浏览器支持”);
   return false;
}else{
    var storage=window.localStorage;
    storage[“a”]=1;//第一种存储方式
    storage.b=2;    //第二种存储方式
    storage.setItem(“c”,3); //第三种存储方式，推荐使用
    console.log(typeof storage[“a”]);
    console.log(typeof storage[“b”]);
    console.log(typeof storage[“c”]);
}

输出都为string类型，这就说明我们在使用的时候要进行类型转换

3、在浏览器隐私模式下不可读取

4、不同浏览器无法共享localStorage

不同浏览器无法共享localStorage,相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标 签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

5、localStorage不能被爬虫获取

6、存储过多数据会导致页面变卡，因为localStorage的本质是对字符串的读取