前端数据存取

开发过程过程中遇到了一个问题，对于某些数据要全局保存起来的，其他页面也要使用。

比如说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请求一起发送，浪费宽带