客户端缓存，可以减少请求的次数，减轻服务器的负担，提升网页加载速度。
一、cookie特点：
1、有时效性，不设置有效期，默认关闭浏览器就失效。
2、分域名储存，在当前域名下储存只能在当前域名下使用。单个域名最多有20个cookie，有的浏览器是50个。单个cookie小于4KB。
3、分路径储存，根路径不能用子路径的数据，子路径可以用根路径的数据。
4、cookie识别的时间是世界时间，和我们北京时间有八个小时时差
5、cookie设置document.cookie = '键=值;expires=失效时间;path=要储存的路径;'
// document.cookie = '键=值;expires=失效时间;path=要储存的路径;'
var date = new Date();
date.setTime(date.getTime() - 8*3600*1000 + 2*3600*1000);
//上面的时间表示，当前时间戳 - 八小时 + 两个小时
//减八小时是为了获取到正确的世界时间，不然直接获取时间戳是北京时间
//加两个小时表示该数据有效时间为两个小时
document.cookie = `name=李四;expires=${date};path=/`
// path=/ 表示储存在根目录下
6、cookie清除document.cookie = '键=值;expires=失效时间改到已经过去的时间';
document.cookie = 'name=张三'
let time = new Date()
time.setTime(time.getTime() - 8*3600*1000 - 1)
document.cookie = 'name=null;expires=' + time
console.log(document.cookie)
二、Web Storage，分为 localStorage 和 sessionStorage
LocalStorage和SessionStorage优点：拥有更大的存储容量，Cookie是4k，Web Storage为5M。 操作数据相比Cookie更简单。 不会随着每次请求发送到服务端。
使用sessionStorage = window.sessionStorage; localStorage = window.localStorage;
//存储一个item storage.setItem('name', 'Alice'); storage.setItem('age', '5');
//读取一个item storage.getItem('name') // returns "Alice"
//get存储对象长度 storage.length // returns 2
//通过索引get对应的key名 storage.key(0) // returns "name"
//移除一个item storage.removeItem('name')
//清空存储对象 storage.clear()
//设置方式2
storage.jsonData = JSON.stringify(jsonData)
//获取方式2
storage.jsonData
一、cookie特点：
1、有时效性，不设置有效期，默认关闭浏览器就失效。
2、分域名储存，在当前域名下储存只能在当前域名下使用。单个域名最多有20个cookie，有的浏览器是50个。单个cookie小于4KB。
3、分路径储存，根路径不能用子路径的数据，子路径可以用根路径的数据。
4、cookie识别的时间是世界时间，和我们北京时间有八个小时时差
5、cookie设置document.cookie = '键=值;expires=失效时间;path=要储存的路径;'
// document.cookie = '键=值;expires=失效时间;path=要储存的路径;'
var date = new Date();
date.setTime(date.getTime() - 8*3600*1000 + 2*3600*1000);
//上面的时间表示，当前时间戳 - 八小时 + 两个小时
//减八小时是为了获取到正确的世界时间，不然直接获取时间戳是北京时间
//加两个小时表示该数据有效时间为两个小时
document.cookie = `name=李四;expires=${date};path=/`
// path=/ 表示储存在根目录下
6、cookie清除document.cookie = '键=值;expires=失效时间改到已经过去的时间';
document.cookie = 'name=张三'
let time = new Date()
time.setTime(time.getTime() - 8*3600*1000 - 1)
document.cookie = 'name=null;expires=' + time
console.log(document.cookie)
二、Web Storage，分为 localStorage 和 sessionStorage
LocalStorage和SessionStorage优点：拥有更大的存储容量，Cookie是4k，Web Storage为5M。 操作数据相比Cookie更简单。 不会随着每次请求发送到服务端。
使用sessionStorage = window.sessionStorage; localStorage = window.localStorage;
//存储一个item storage.setItem('name', 'Alice'); storage.setItem('age', '5');
//读取一个item storage.getItem('name') // returns "Alice"
//get存储对象长度 storage.length // returns 2
//通过索引get对应的key名 storage.key(0) // returns "name"
//移除一个item storage.removeItem('name')
//清空存储对象 storage.clear()
//设置方式2
storage.jsonData = JSON.stringify(jsonData)
//获取方式2
storage.jsonData
LocalStorage与SessionStorage的区别
LocalStorage：数据会永久储存，不清除的话一直都在
SessionStorage：浏览器刷新或者关闭时，数据会丢失
LocalStorage和SessionStorage之间的主要区别在于浏览器窗口和选项卡之间的数据共享方式不同。
LocalStorage可跨浏览器窗口和选项卡间共享。就是说如果在多个选项卡和窗口中打开了一个应用程序，而一旦在其中一个选项卡或窗口中更新了LocalStorage，则在所有其他选项卡和窗口中都会看到更新后的LocalStorage数据。
但是，SessionStorage数据独立于其他选项卡和窗口。如果同时打开了两个选项卡，其中一个更新了SessionStorage，则在其他选项卡和窗口中不会反映出来。举个例子：假设用户想要通过两个浏览器选项卡预订两个酒店房间。由于这是单独的会话数据，因此使用SessionStorage是酒店预订应用程序的理想选择。
安全性说明
Web Storage的存储对象是独立于域名的，也就是说不同站点下的Web应用有着自己独立的存储对象，互相间是无法访问的，在这一点上SessionStorage和LocalStorage是相同的。
举个例子：部署在abc.com上的Web应用无法访问xyz.com的Web Storage存储对象。
同样，对于子域名也是一样，尽管www.grapecity.com.cn和gcdn.grapecity.com.cn 同属 grapecity.com.cn 主域下，但它们相互不能访问对方的存储对象。
另外，不仅对子域名相互独立，对于针对使用http和https协议间也是不同的，所以这一点也需要注意。
