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=/";

3、session
服务器每一时刻请求都会很多，服务器未来区分这些请求分别是那个用户的，就需要记录用户和该用户的信息之间的对应关系。
session会话本质是一个哈希表，用来存放一些键值对；例如用户登录一个网站，Seesion的key就是用户名，value就是该用户的信息。
4、sessionId
sessionId是由服务器生成的一个“唯一性字符串”，也可以理解为一个身份表示，通过这个，服务器就可以识别对应的用户；从session机制的角度来看，这个唯一性字符串称为 “sessionId”，但在整个登录流程来看，也可以把这个唯一字符称为 “token”
注意：Servlet 的 Session 默认是保存在内存中的. 如果重启服务器则 Session 数据就会丢失

5、Session和cookie的具体工作流程

6、cookie的实现
6.1、基本用法
创建cookie,每次只能创建一个cookie键值对

document.cookie = "name=cy"

设置cookie过期时间

document.cookie = "age=5; expires=Thu, 18 Dec 2043 12:00:00 GMT"

读取cookie返回域名下所有的cookie

const name = document.cookie

删除cookie, 通过将过期时间指定为原始时间，即可删除

document.cookie = "name=; expires=Thu, 01 Jan 1970 00:00:00 UTC;";

通过函数定义cookie

function setCookie(name, value, exdays) {
	var d = new Date()
	d.setTime(d.getTime() + (exdats*24*60*60*1000))
	var expires = "expires=" + d.toUTCString()
	document.cookie = name + "=" + value + ";" + expires
}
function getCookie(name) {
	var name = name + "="
	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 ""
}
// 清除cookie
function clearCookie(name) {
	setCookie(name, "", -1) // 表示只在当前页面cookie有效
}

三、localStorage介绍

localStorage理论上是永久有效的，但是在移动设备上的浏览器或者个native App用到webView里，localStorage都是不可靠的，可能会应为各种原因（比如退出App、网络切换、内存不足等原因）被清空。
1、localStorage的用法
存储数据：

localStorage.setItem(key, value)

获取数据：

localStorage.getItem(key, value)

移除数据：

localStorage.removeItem(key, value)

清除所有数据

localSorage.clear()

四、sessionStorage

SessionStorage 是会话存储，如果当前标签关闭则表示SessionStorage中存储的数据被浏览器销毁。
1、SessionStorage 的用法
存储数据：

SessionStorage .setItem(key, value)

获取数据：

SessionStorage .getItem(key, value)

移除数据：

SessionStorage  .removeItem(key, value)

清除所有数据

SessionStorage .clear()