认识本地存储

Posted 2020-12-03 houfee

1、本地存储

document.cookie

有效期：
		1、如果没有设置有效期，会话结束就失效
		2、如果设置有效期，依据有效期时间失效
存储大小：4kb左右
有效范围：只能在自己的域名下有效
发送请求：携带，在会话过程中，每次请求在报文的头部会携带cookie信息
使用方式：
	设置cookie:   document.cookie = “名称=值;expires=时间”
	读取cookie:   document.cookie

window.localStorage

localStorage：
有效期：永久生效，除非手动删除 关闭页面也会存在  
存储大小：20mb
有效范围:只能在自己的域名下有效，可以多窗口（页面）共享（同一浏览器可以共享）
发送请求：不携带
使用方式：
1.获取localStorage的长度：window.localStorage.length
2.根据对应的索引去获取对应localStorage的key的值：window.localStorage.key(索引);
3.添加/编辑localStorage的内容：window.localStorage.setItem(键,值);
4.根据对应的key获取对应的的value：window.localStorage.getItem(键);
5.根据对应的key删除记录：window.localStorage.removeItem(键);
6.清空存储：window.localStorage.clear();

　widow.sessionStorage

有效期：生命周期为关闭浏览器窗口  
存储大小：5mb作用
有效范围:只能在自己的域名下有效 同一个页签下有效
发送请求：不携带
使用方式：
1.获取sessionStorage的长度：window.sessionStorage.length
2.根据对应的索引去获取对应sessionStorage的key的值：window.sessionStorage.key(索引);
3.添加/编辑sessionStorage的内容：window.sessionStorage.setItem(键,值);
4.根据对应的key获取对应的的value：window.sessionStorage.getItem(键);
5.根据对应的key删除记录：window.sessionStorage.removeItem(键);
6.清空存储：window.sessionStorage.clear();

2、localStorage使用

  <div id="result">
    
  </div>
  <script>
    // 存储
    localStorage.setItem("lastname", "Gates");
    // 读取
    document.getElementById("result").innerhtml = localStorage.getItem("lastname");
  </script>