localStorage、sessionStorage、cookie

一、前言

前端浏览器本地存储的方式有三种，分别是 localStorage、sessionStorage、cookie.
localStorage:
localstorage 的生命周期是永久的，存放数据大小一般为5MB，不参加和服务的通信，不能跨浏览器使用。应用场景：历史记录、登录
sessionStorage
seesionStorage 仅在当前会话下有效，关闭页面或者浏览器后被消除。存放数据大小一般为5MB, 不能参与于服务器的通信，不能跨浏览器使用。页面之间的传值，敏感账号的一次性登录。
cookie
cookies 数据存储在浏览器，单个cookie数据不能超过4k; cookie 的信息会在 http 请求的时候携带到服务器，可在request headers中查看，不能跨浏览器使用，应用场景，判断用户是否登录过网站，保存上次登录的时间等信息，浏览计数。
区别

• localStorage：内存5Mb，始终有效，在所有同源窗口中都是共享的。
• sessionStorage： 内存5MB, 仅在当前浏览器窗口关闭前有效，在不同的浏览器窗口不共享。
• cookie：不超过4k，设置cookie的过期时间之前一直有效，在所有同源窗口中共享。

相同：
这三者都是可以被利用来在浏览器端存储数据，而且都是字符类型的键值对。

二、Cookie介绍

1、cookie
cookie是按照域名来维系组织的，不同域名下有不同的Cookie, 每一个Cookie都是一个键值对
注意： Cookie 不是缓存，是持久化数据手段（保存在硬盘上）， 缓存数据是用来提高访问速度的。
cookie的来源：cookie存在浏览器，来源于服务器。
在网页中我们看见的Cookie都是浏览器访问某个服务器后，服务器返回一个响应报文，在响应header中包含一个/多个Set-Cookie这样的资源（程序员在自己服务代码中写的），浏览器接到响应后，就将Set-Cookie这样的数据白存在浏览器本地。
当浏览器保存cookie后下次访问网站，就将Cookie放在header中返回给服务器，服务器就知道，还是之前的客户端。

2、Cookie的属性

属性	详情
name	一个域名下的name不能相同，相同则会被覆盖
value	由于cookie规定是名称/值是不允许包含分号，逗号，空格的
domain	cookie绑定的域名，如果没有设置则自动绑定在当前执行语句的域，同一个域名下二级域名也是 不可以交换cookie的
expirse	cookie的有效期， 现在被Max-Age取代，以秒为单位，如果为负数表述只在当前窗口有效，一旦关闭，cookie就消失
secure	secure为true, cookie只会在https和ssl等安全写一下传输
httpOnly	不能通过javascrip获取用户的cookie

代码表示

document.cookie="username=mxr; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/&#