开发过程过程中遇到了一个问题,对于某些数据要全局保存起来的,其他页面也要使用。
比如说token,项目中无论是那个前端页面,请求数据时都要用到这个token。
局部变量和全局变量
JS有局部变量和全局变量,实际上,局部变量的作用范围是局部代码块,全局变量的作用范围时全局页面。并不符合需求要求的项目所有页面均能使用。
Web Storage 前端本地存储
Storage可以将你需要所有页面共同使用数据存储到本地,这个相当于一个5M大小的针对于前端页面的数据库,全项目存取。
Storage 分为localStorage 和 sessionStorage,都是将数据永久存储在本地。唯一的区别就是localStorage属于永久性存储,而sessionStorage属于当会话结束的时候,sessionStorage中的键值对会被清空。
注意:在IE8以上的IE版本才支持localStorage这个属性。localStorage属于永久性存储,如果存储内容多的话会消耗内存空间,会导致页面变卡。
localStorage
// 存入数据
localStorage.setItem("name", "大话家");
// 取出数据
localStorage.getItem("name");
// 清空localStorage
localStorage.clear();
// 删除键值对
localStorage.removeItem("name");
<!--
注意:存入的数据只能以字符串形式存入。对于对象的存取需要进行转换
-->
// JSON对象
var obj = {"name": "大话家", "age": 23};
// 保存前,JSON对象转JSON字符串
localStorage.setItem("obj", JSON.stringify(obj));
// 取出时,JSON字符串转JSON对象
var obj2 = JSON.parse(localStorage.getItem("obj"));
sessionStorage
// 存入数据
sessionStorage.setItem("name", "大话家");
// 取出数据
sessionStorage.getItem("name");
// 清空sessionStorage
sessionStorage.clear();
// 删除键值对
sessionStorage.removeItem("name");
<!--
注意:存入的数据只能以字符串形式存入。对于对象的存取需要进行转换
-->
// JSON对象
var obj = {"name": "大话家", "age": 23};
// 保存前,JSON对象转JSON字符串
sessionStorage.setItem("obj", JSON.stringify(obj));
// 取出时,JSON字符串转JSON对象
var obj2 = JSON.parse(sessionStorage.getItem("obj"));
google浏览器查看localStorage和sessionStorage
cookie的说明
cookie的存取是不很方便,需要有另外依赖jquery.cookie的js文件。
1.cookie限制大小,约4k左右,不适合存储业务数据,尤其是数据量较大的值
2.cookie会每次随http请求一起发送,浪费宽带