web存储 浏览器缓存得 方式与区别（一）localStorage，sessionStorage，cookie

前端在处理页面数据的时候有时候会存放一些数据在浏览器当中，一般存储在浏览器当中的缓存数据安全性比较低。
主要的存储方式如下图：

1.localStorage

1.存储时间是永久存储。
2.大小在5M左右。
3.ie低版本或者一些使用无痕浏览器都是不支持的
4.存储的是字符串，内容过多时，会消耗内存空间，让页面变卡
5.本地存储，不会和服务器有交互

代码：
// 使用方法存储数据
localStorage.setItem("name", "Srtian")
// 使用属性存储数据
localStorage.say = "Hello world"
// 使用方法读取数据
const name = localStorage.getItem("name")
// 使用属性读取数据
const say = localStorage.say
// 删除数据
localStorage.removeItem("name")

2.sessionStorage

大致跟localStorage一样
区别：不是永久存储，一旦浏览器的窗口关闭，也随之清除

//  使用方法存储数据
sessionStorage.setItem("ifClick", "true");//  使用属性存储数据
sessionStorage.ifClick = "true";

5.cookie

优点：
1.存储时间可以根据存储得规则无限期得存储。
2.Cookie的兼容性非常的好。
缺点：
1.大小被限制：一般每个域只能存储20个左右，每个cookie大小在4k左右，
2.cookie要往返与客户端和服务端，会浪费不必要的资源

代码：
function setCookie(cname, cvalue, exdays) {var d = new Date();d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));var expires = "expires=" + d.toUTCString();document.cookie = cname + "=" + cvalue + "; " + expires+"; path=/"   这个很重要代表在那个层级下可以访问cookieconsole.log(d)}//获取cookiefunction getCookie(cname) {var name = cname + "=";var ca = document.cookie.split(';');for(var i = 0; i < ca.length; i++) {var c = ca[i];while(c.charAt(0) == ' ') c = c.substring(1);if(c.indexOf(name) != -1) return c.substring(name.length, c.length);}return "";}//删除 cookiefunction clearCookie(name) {setCookie(name, "", -1);}