一、什么是Cookie？
Cookie是小量信息，由网络服务器发送出来以存储在网络浏览器上，从而下次这位独一无二的访客又回到该网络服务器时，可从该浏览器读回此信息。所以它具有一定得信息存储功能，但是并不是什么都存放在cookie中。
二、Cookie的作用
Cookies最典型的应用是判定注册用户是否已经登录网站，用户可能会得到提示，是否在下一次进入此网站时保留用户信息以便简化登录手续，这些都是Cookies的功用。
当然这些信息也并不是一直存放与你的浏览器中，Cookie有一个存放周期，可以通过代码自己决定存放周期，一般来说，我们都是在退出登陆的时候删除Cookie为了确保用户信息的安全。
三、如何应用Cookie
由于Cookie没有提供专门的API接口，所以需要我们自己来实现对于Cookie的操作:
class CookieHandle{
setCookie(name,value,saveTime){
let exdate = new Date();
exdate.setDate(exdate.getDate()+saveTime) //设置存储周期
document.cookie = name + "=" + escape(value) + ((saveTime == null) ？ "" : ";expires="+exdate.toGMTString()) //设置cookie，并对信息进行一次加密
}
getCookie(name){
let cookie = document.cookie;
if(cookie.length>0){
cookie_start = cookie.indexOf(name + "=") //通过name找到我们需要cookie是否存在
if(cookie_start>-1){
cookie_start = cookie_start + name.length + 1;
cookie_end = cookie.indexOf(';',cookie_start) //查询cookie结尾的位置
if(cookie_end == -1){
cookie_end = cookie.length
}
return unescape(cookie.substring(cookie_start,cookie_end)); //返回找到的cookie的值并且解码
}
}
}
delCookie(name){
document.cookie = name + '=0;expires=' + new Date(0).toUTCString()
}
}四、各大浏览器对于Cookie的限制
1、浏览器允许每个域名所包含的cookie数：
Microsoft指出InternetExplorer8增加cookie限制为每个域名50个，但IE7似乎也允许每个域名50个cookie。
Firefox每个域名cookie限制为50个。
Opera每个域名cookie限制为30个。
Safari/WebKit貌似没有cookie限制。但是如果cookie很多，则会使header大小超过服务器的处理的限制，会导致错误发生。
注：“每个域名cookie限制为20个”将不再正确！
2、当很多的cookie被设置，浏览器如何去响应。
除Safari（可以设置全部cookie，不管数量多少），有两个方法：
最少最近使用（leastrecentlyused(LRU)）的方法：当Cookie已达到限额，自动踢除最老的Cookie，以使给最新的Cookie一些空间。Internet Explorer和Opera使用此方法。
Firefox很独特：虽然最后的设置的Cookie始终保留，但似乎随机决定哪些cookie被保留。似乎没有任何计划（建议：在Firefox中不要超过Cookie限制）。
3、不同浏览器间cookie总大小也不同：
Firefox和Safari允许cookie多达4097个字节，包括名（name）、值（value）和等号。
Opera允许cookie多达4096个字节，包括：名（name）、值（value）和等号。
Internet Explorer允许cookie多达4095个字节，包括：名（name）、值（value）和等号。
注：多字节字符计算为两个字节。在所有浏览器中，任何cookie大小超过限制都被忽略，且永远不会被设置。来源：https://www.cnblogs.com/henry...
一、什么是Web Storage
它包含了两种机制：
- sessionStorage 为每一个给定的源（givenorigin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。
- localStorage 同样的功能，但是在浏览器关闭，然后重新打开后数据仍然存在。
请注意这里是sessionStorage而不是session，这两者有着千差万别。
二、Web Storage的作用
存储一些需要页面共享的信息，并且不需要向后台发送的信息。
三、如何使用Web Storage
localStorage.setItem('name', 'Tom'); //在localStorage中写入键名为name，值为Tom的信息
let cat = localStorage.getItem("name"); //获取localStorage中键名为name的值。
localStorage.removeItem("name"); //移除name。
sessionStorage.setItem('key', 'value'); // 保存数据到sessionStorage
let data = sessionStorage.getItem('key'); // 从sessionStorage获取数据
sessionStorage.removeItem('key'); // 从sessionStorage删除保存的数据
sessionStorage.clear(); // 从sessionStorage删除所有保存的数据
四、各大浏览器Web Storage的存储限制
IE 9 > 4999995 + 5 = 5000000
firefox 22.0 > 5242875 + 5 = 5242880
chrome 28.0 > 2621435 + 5 = 2621440
safari 5.1 > 2621435 + 5 = 2621440
opera 12.15 > 5M （超出则会弹出允许请求更多空间的对话框）来源：https://blog.csdn.net/cengjin...
一、Cookie、SessionStorage、LocalStorage的区别
1、Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的，cookie的大小是受限的，并且每次请求一个新的页面的时候cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可跨域调用。
2、web storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。
3、cookie的作用是与服务器进行交互，作为http规范的一部分而存在的，而web Storage仅仅是为了在本地“存储”数据而生
4、sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念，sessionStorage是在同源的同窗口中，始终存在的数据，也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一个页面，数据仍然存在，关闭窗口后，sessionStorage就会被销毁，同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的。
来源：https://blog.csdn.net/ruby_xc...