network

sessionStorage,localStorage与Cookie

Web Storage API (sessionStorage,localStorage) 提供机制， 使浏览器能以一种比使用 Cookie 更直观的方式存储键/值对。

前言

我简单理解就是数据的本地存储，个人运用也是登录状态和个人信息等存储, 保证页面刷新与路由变化都不会丢失与初始化。 但三者具体的区别是什么？会在本文赘述。当然也是方便自己以后查看，毕竟健忘…

基本概念

Cookie 是服务器保存在浏览器的一小段文本信息，一般大小不能超过 4KB。通常保存登录状态 （会话状态管理）、个性化设置、浏览器行为跟踪等。

sessionStorage

“session”会话，可以为前端的浏览器会话机制. 比使用 Cookie 更直观的方式存储键/值对呈现。可以存储数据信息，刷新、重新加载与恢复页面数据仍然存在，但当页面关闭或浏览器关闭，数据将会被清空。

localStorage

与 sessionStorage 基本相同，同样的功能，较大的区别就是浏览器关闭，重新打开后数据仍然存在。与 Cookie 一样支持同源窗口数据共享。

异同

特性 Cookie Web Storage
数据周期 一般由服务器生成，时效期 sessionStorage: 当前会话有效，关闭页面/浏览器清除;localStorage:浏览器永久保存，可清除
数据大小 4K左右 一般5M,甚至更大
使用 前端开发者需要自己封装setCookie，getCookie 浏览器提供API，拥有setItem,getItem,removeItem,clear等方法
访问 服务器 + 客户端 浏览器 （服务器不能直接访问）

使用

当服务器收到HTTP请求时，服务器可以在响应头里面添加一个Set-Cookie选项。浏览器收到响应后通常会保存下Cookie，之后对该服务器每一次请求中都通过Cookie请求头部将Cookie信息发送给服务器。另外，Cookie的过期时间、域、路径、有效期、适用站点都可以根据需要来指定。MORE

1
Set-Cookie: <cookie名>=<cookie值>

Web Storage

like this:

1
2
3
localStorage.setItem('name', value);
localStorage.getItem('name');
localStorage.clear()

MORE

安全

详细文档可参考一下MDN文档。但总的来说都不安全，Cookie注意使用HTTPS，还有就是不管什么存储信息都不要存储敏感信息数据。

参考：
HTTP cookies
Web Storage API