cookie,session,localstorage,sessionStorage区别

在登录页面填写了手机号和座位号，这里我要把把座位号和电话号码传到后台
方法有很多，可以用vuex，但是因为我是新手，这个比较难一点，所以也就放弃了
于是决定用localStorage把这些登录数据存在页面上。

先了解了一下有关于html页面的几种存储数据的方式：

cookie,session,localstorage,sessionStorage

localstorage,sessionStorage区别和介绍
localstorage
本地存储生命周期是长期，除用户在页面上清除本地存储信息，否则信息将长期有效。
sessionStorage
会话存储 生命周期限制在当前窗口或标签页，一旦窗口或标签页被关闭，则会话存储存储的数据也被清空。
区别：
同一浏览器，不同页面之间可以共用本地存储信息；
不同页面或标签页是无法共用会话存储的信息。
localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。
sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。

使用方法很简单，先存再取，代码如下

 // 把表单数据传给main页面
localStorage.setItem('userInfo', JSON.stringify(this.loginForm)) // JSON.stringify 将JSON转为字符串存到变量里

// 接收传给main页面的表单数据
var userInfo = localStorage.getItem('userInfo')
this.userInfo = JSON.parse(userInfo) // 转为JSON
console.log('seat ' + this.userInfo.seat)

---

webStorage：
webStorage指Web存储，是h5提供的新型存储方案，类似于cookie。

webStorage分为两种：
一种是localStorage本地存储，一种是sessionStorage会话存储
localStorage和sessionStorage二者的api方法一模一样，使用方式也一样，只要学会一个，另外一个就会了。

localStorage本地存储，只要客户端不删除，永远不失效。
sessionStorage会话存储，只在一个会话内有效。

会话：指浏览器上每个页面从显示到消亡的过程，就是一个会话。特别注意：二个选项卡指两个会话。

需要掌握的api(sessionStorage和此类同):
localStorage.setItem(key,value);
localStorage.getItem(key);
localStorage.removeItem(key);
localStorage.clear();e.length;
localStorage.key(index);
localStorag

---

缓存：

cookie（客户端和服务器端都有。）,session（node端的服务器端存储）
document.cookie（客户端）

cookie缺点：
缓存的数据有限制，大概4kb
不安全，存储客户端，很容易被人为控制。一般不建议存储安全比较高的数据。比如：银行账号，密码等相关数据。

manifest.xml（离线缓存，旧技术）,manifest.json(实验性质的技术)

缓存技术的出现原因是http协议无状态。

数据库缓存：
memached
redis

参考文档：
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage
https://blog.csdn.net/mjzhang1993/article/details/70820868
https://segmentfault.com/a/1190000012057010

本地文件2018.9.17
cookie和localStorag的一些实例

---

sessionStorage
先把页面存储数据在当前会话中，然后去跳转后的页面获取这些数据并且赋值给另一个变量

sessionStorage只能存储字符串类型数据，无法直接存储数组类型和JSON对象，
若想存数组或者json对象
首先将JSON对象通过JSON.stringify()方法转换成字符串，再存储到sessionstorage中，
然后通过JSON.parse()方法将字符串转换成JSON格式即可

var obj = {
  "name": "Tom",
  "age": 12,
  "gender": "man"
};
sessionstorage.setItem('jsonParams',JSON.stringify(obj));

var data = JSON.parse(sessionstorage.getItem('jsonParams'));
console.log(data);

https://blog.csdn.net/bs__q/article/details/78328037