本地存储和cookie的区别

cooki是一种存储机制

第一次请求网页内容时没有任何cookie，服务器在收到请求以后会在HTTP响应里添加添加头部Set-Cookie,并且在Set-Cookie里进行标识，在下一次请求的时候浏览器就会在HTTP请求里添加头部Cookie，并且用上Set-Cookie里的标识，这样服务器就可以给不同用户匹配不同的内容，自打服务器给了Set-Cookie以后，以后每一次HTTP请求都要把Cookie数据传送给服务器，如果每一次都要把含有大量数据的Cookie发送给服务器，无疑是一种自杀行为

Cookie设计得很小，不能超过4KB

点击记住我，并且登录以后，在下次登录时就无需再次输入用户名，勾选记住即表示设置Cookie,登录按钮提交HTTP请求

Cookie的基本语法就是使用：documen.cookie

document.cookie属性值是字符串类型，这个字符串最核心的内容就是名值对

实际浏览器对每个网站的cookie数量是有限制的

Web存储也就是本地存储：其中两个重要对象是localStorage和sessionStorage当用户第一次请求服务器时，服务器响应内容并且附加可操控网页的JS,当用户操作JS进行个人设置的时候，这些个人设置可以通过Web存储机制保存在浏览器里

localStorage会永远保存在浏览器里，也可自行删除，虽然保存下来了，但他本身不参与服务器通信，

这样看存储的容量比cookie大非常多，但是因为localStorage是同步的机制，会影响浏览器渲染进度

sessionStorage会保存在浏览器里，但是窗口关闭就会被删除

cookie的容量非常小，实际当中更小

localStorage和sessionStorage比较大

但是localStorage同步执行，太大会影响渲染进度

浏览器都能支持cookie，但是只有现代浏览器能支持Web存储

当cookie和localStorage被保存下来以后，所有窗口都能够访问，当然需要同源

sessionStorage仅在当前窗口有效，相对安全性高很多

有效期的话Cookie是可以手动设置的，localStorage不会过期，除非自行删除，sessionStorage在窗口关闭后就过期了

Wbe存储都仅仅保存在本地浏览器里，但是cookie是在浏览器和服务器两者里，因为cookie会在第二次后的每次HTTP请求里出现，而Web存储本身不参与请求活动

语法来说肯定是cookie比较难用，而且要在前面加document.

web存储就简单非常多，而且因为直属window，可以不加window直接调用，存储内容5Mb左右，不同浏览器可能还不一样

本地存储保存setItem的是字符串形式，所以要保存对象就先用JSON.stringify()转换成字符串，如果使用getItem读取的数据是字符串，可以用JSON.parse()转换成对象，简单有好看

	cookie	localStorage	sessionStorage
大小	4kb	10Mb	5Mb
兼容	H4/H5	H5	H5
访问	任何窗口	任何窗口	同一窗口
有效期	手动设置	无	到窗口关闭
存储位置	浏览器和服务器	浏览器	浏览器
与请求一起发送	是	否	否
语法	复杂	简易	简易