前端本地存储使用及理解

前端本地存储的3种方法

Cookie

Cookie的使用场景及须知

1. 用于浏览器和server的通讯

2. 可设置失效时间，默认是浏览器关闭后失效

3. 存放数据大小为4K左右

4. 每次都会携带在HTTP头中，如果使用Cookie保存过多数据会带来性能的问题

5. .需要程序员自己封装，原生的Cookie接口不友好

Cookie用法

     (设置) document.cookie= "a=100; b=200"     //一次只能添加一个, 多余的会被截取
​
     (读取) document.cookie                   //"a=100" 
​
     (修改) document.cookie= "a=101“
     
     (读取) document.cookie                   //"a=101"
     
​

Cookie缺点： 语法过于简陋,只能追加,不易理解

localStorage

localStorage的使用场景及须知

1. 除非被清除，否则长时间保存

2. 存放数据大小一般为5MB

3. 仅在客户端（即浏览器）中保存，不参与和服务器的通信

4. 浏览器可以设置是否可以访问数据，如果设置不允许会访问失败

5. 兼容IE8以上浏览器

6. 只能存储字符串类型，需要转成字符串存储

localStorage用法

(设置) 
 localStorage.setItem("key","value")
 localStorage["name"]="bonly"; 
  localStorage.key="value"; 
  
 (读取)
 localStorage.getItem("key");
 localStorage["name"]; localStorage.key;
 
 (修改)  // 就是相当于给对应的key重新赋值，就会把原来的值覆盖掉
 localStorage.setItem("key","value") 
 
 (移除) 
 localStorage.removeItem('name') 
 delete localStorage["name"]
 delete localStorage.name
 
 (获取所有的key) 
 for(var key in localStorage){ console.log(key); } 
 
 (获取所有的值) 
 localStorage.valueOf()
 
 (清除所有的值) 
 localStorage.clear()
 
 (判断是否具有某个key，hasOwnProperty方法) // 如果存在的话返回true，不存在返回false 
 localStorage.hasOwnProperty("name") 
​

localStorage使用技巧

1. 先判断浏览器是否支持localStorage，通过if(!window.localStorage) return;

2. 单词太长，不方便书写，可以利用 var storage=window.localStorage;

3. 字符串和原始类型需要通过JSON.stringfy转字符串，通过JSON.parse转成对象

4. 通过封装方法实现来回转化

sessionStorage

sessionStorage 的使用场景及须知

1. 仅在当前会话下有效，关闭tab页面或浏览器后被清除

2. 存放数据大小一般为5MB

3. 仅在客户端（即浏览器）中保存，不参与和服务器的通信

localStorage用法(与localSorage一样)

(设置)
 sessionStorage.setItem("key", "value")
 sessionStorage.key="value"
 sessionStorage["name"]="bonly"
​
 (读取) 
 sessionStorage.getItem("key")
 sessionStorage["name"]
 sessionStorage.name
 
 (删除) 
 sessionStorage.removeItem("name")
 
 (删除所有数据) 
 sessionStorage.clear()