在登录页面填写了手机号和座位号,这里我要把把座位号和电话号码传到后台
方法有很多,可以用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