cookie也叫HTTP cookie，最初是客户端与服务器端进行会话使用的。
比如，会员登录，下次回访网站时无须登录了；或者是购物车，购买的商品没有及时付款，过两
天发现购物车里还有之前的商品列表。
HTTP cookie要求服务器对任意HTTP请求发送Set-cookie，因此，cookie的处理原则上需要在
服务器环境下进行。
当然，现在大部分浏览器在客户端也能实现cookie的生成和获取。
cookie的组成cookie 由 键/值对 形式的文本组成：
name=value;
完整格式为：
name=value; [expires=date]; [path=path]; [domain=somewhere.com]; [secure] 中括号是可选，name=value是必选
cookie读写
document.cookie = 'user=xiaoming'//写入 alert(document.cookie); //读取cookie可选参数作用 expires 失效时间
expires=date 失效时间，如果没有声明，则为浏览器关闭后即失效。
声明了失效时间，那么时间到期后方能失效。
var date = new Date();
创建一个
date.setDate(date.getDate() + 7); document.cookie = "user=xiaoming;expires=" + date;
如果要提前删除cookie也非常简单，只要重新创建cookie把时间设置当前时间之前即可：
date.getDate() - 1 或 new Date(0)。path 访问路径
path=path 访问路径，当设置了路径，那么只有设置的那个路径文件才可以访问cookie。
domain 访问域名domain=domain 访问域名，用于限制只有设置的域名才可以访问，那么没有设置，会默认限制
为创建cookie的域名。
var domain = ‘baidu.com'; document.cookie = "user=admin;domain=" + domain;secure 安全设置
secure 安全设置，指明必须通过安全的通信通道来传输(HTTPS)才能获取cookie。
document.cookie = "user=zeng;secure";cookie的创建和获取
创建cookie
function setcookie(name,value,expires) {
if(expires == undefined){
document.cookie = `${name}=${value}`;
}
else {
document.cookie = `${name}=${value};expires=${expires}`;
}
}
获取cookie
function getcookie(name) {
let _cookies = document.cookie ;
let cookies = _cookies.split(";");
for(let cookie of cookies) {
// 通过 = 进行拆分
let [key, value] = cookie.split("=");
if (name === key) {
return value ;
}
}
}
移除cookie
function removecookie(name) {
let str = `${name}=;`
document.cookie = str
}
cookie局限性
cookie虽然在持久保存客户端用户数据提供了方便，分担了服务器存储的负担。但是还有很多局限性的。
-
第一：每个特定的域名下最多生成20个cookie（根据不同的浏览器有所区别）。
- 1.IE6或更低版本最多20个cookie
- 2.IE7和之后的版本最多可以50个cookie。IE7最初也只能20个，之后因被升级不定后增加了。
- 3.Firefox最多50个cookie
- 4.Opera最多30个cookie
- 5.Safari和Chrome没有做硬性限制。
为了更好的兼容性，所以按照最低的要求来，也就是最多不得超过20个cookie。当超过指定的cookie时，浏览器会清理掉早期的cookie。IE和Opera会清理近期最少使用的cookie，Firefox会随机清理cookie。
-
第二：cookie的最大大约为4096字节(4k)，为了更好的兼容性，一般不能超过4095字节即可。
-
第三：cookie存储在客户端的文本文件，所以特别重要和敏感的数据是不建议保存在cookie的。比如银行卡号，用户密码等
-
第四： cookie 会把数据发送到服务端有些会造成不必要的带宽浪费cookie不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
cookie通过在客户端记录信息确定用户身份，
Session通过在服务器端记录信息确定用户身份。
localStorage本地存储
localStorage.setItem(‘name’, ‘小林’);
alert(localStorage.getItem(‘name’))
//通过属性存储和获取
localStorage.book = ‘小林’;
alert(localStorage.book);
//删除存储
localStorage.removeItem(‘name’);
//清除所有
localStorage.clear();
localStorage保存在缓存里，只有手工删除或者清理浏览器缓存方可失效。
在容量上也有一些限制，主要看浏览器的差异，Firefox3+、IE8+、Opera为5M，Chrome和Safari为2.5M。
sessionStoragesessionStorage： session即会话的意思，在这里的session是指用户浏览某个网站时，从进入网站到关闭网站这个时间段，session对象的有效期就只有这么长。
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
localStorage： 将数据保存在客户端硬件设备上，不管它是什么，意思就是下次打开计算机时候数据还在。
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。两者区别就是一个作为临时保存，一个长期保存。
阅读材料：
cookie与session的区别？
https://mp.weixin.qq.com/s/3p0FVCVhiRhtkae1DYHK3g
