JavaScript 浏览器缓存

• sessionStorage 会话存储空间

sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除; 他也可以直接以成员的方式操作。

// 添加数据
sessionStorage.setItem("name","丁真")
sessionStorage.setItem("age",18)

// 获取数据 
console.log(sessionStorage.getItem("name")) // 丁真 

// 清除某个数据
sessionStorage.removeItem("name")

// 清空所有数据 
sessionStorage.clear()

localStorage.name = 'yd';
// 获取
localStorage.name; // yd
// 删除
delete localStorage.name;
// 清除全部
localStorage.clear();

// 遍历
for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i); // 获取本地存储的Key
    localStorage[key]; // 获取本地存储的value
}

• localStorage 本地存储空间

localStorage 是 HTML5 标准中新加入的技术，用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除；
localStorage和sessionStorage最大一般为5MB，仅在客户端（即浏览器）中保存，不参与和服务器的通信；

很多人理解的是浏览器关闭，这是不对的，假设你在A页面存储了sessionStorage，新开选项卡将A页面的链接粘贴进去打开页面，sessionStorage也是不存在的。所以sessionStorage存在的条件是页面间的跳转，A页面存储了sessionStorage，他要通过超链接或者location.href或者window.open来打开另一个同域页面才能访问sessionStorage。

这一点在混合开发嵌套H5的开发模式中尤为重要，如果以新开webview的方式打开页面，很可能sessionStorage就没有了

// 添加数据 
localStorage.setItem("name","丁真") 
localStorage.setItem("age",20) 
localStorage.setItem("gender","男") 

// 获取数据 
console.log(localStorage.getItem("name")) // 丁真 

// 清除某个数据 
localStorage.removeItem("gender") 

// 清空所有数据 
localStorage.clear()

• Cookie

Cookie 是一些数据, 存储于你电脑上的文本文件中，用于存储 web 页面的用户信息
Cookie 数据是以键值对的形式存在的，每个键值对都有过期时间。如果不设置时间，浏览器关闭，cookie就会消失，当然用户也可以手动清除cookie
Cookie每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题
Cookie内存大小受限，一般每个域名下是4K左右，每个域名大概能存储50个键值对

// 设置cookie 
document.cookie = "username=orochiz" 
document.cookie = "age=20" 

// 读取cookie 
var msg = document.cookie 
console.log(msg) // username=orochiz; age=20 

// 添加过期时间（单位：天） 
var d = new Date() // 当前时间 2019-9-25 
var days = 3 // 3天 
d.setDate(d.getDate() + days) document.cookie = "username=orochiz;"+"expires="+d

// 删除cookie （给某个键值对设置过期的时间） 
d.setDate(d.getDate() - 1) 
console.log(document.cookie)

• 已使用存储空间大小

var sizeStore = 0; 
if(window.sessionStorage) { 
    // 遍历所有存储 
    for(item in window.sessionStorage) { 
        if(window.sessionStorage.hasOwnProperty(item)) { 
            sizeStore += window.sessionStorage.getItem(item).length;
        }
    }
} 
console.log((sizeStore / 1024 / 1024).toFixed(2) + 'M');