LocalStorage和SessionStorage
LocalStorage
localStorage方法用来在本地存储数据。比如用户刚刚已经填过一次资料，后返回这一页查看，需要之前填的信息都显示着。
是对Cookie的优化
没有时间限制的数据存储
在隐私模式下不可读取
大小限制在500万字符左右，各个浏览器不一致
在所有同源窗口中都是共享的
本质是在读写文件，数据多的话会比较卡（firefox会一次性将数据导入内存）
不能被爬虫爬取，不要用它完全取代URL传参
IE７及以下不支持外，其他标准浏览器都完全支持
SessionStorage
针对一个 session 的数据存储
大小限制在5M左右，各个浏览器不一致
仅在当前浏览器窗口关闭前有效（适合会话验证）
不在不同的浏览器窗口中共享，即使是同一个页面
JS下的操作方法
获取键值：localStorage.getItem(“key”)
设置键值：localStorage.setItem(“key”,”value”)
清除键值：localStorage.removeItem(“key”)
清除所有键值：localStorage.clear()
获取键值2：localStorage.keyName
设置键值2：localStorage.keyName = “value”
JQ下的操作方法（JS方法前加”window.”）
获取键值：window.localStorage.getItem(“key”)
设置键值：window.localStorage.setItem(“key”,”value”)
清除键值：window.localStorage.removeItem(“key”)
清除所有键值：window.localStorage.clear()
获取键值2：window.localStorage.keyName
设置键值2：window.localStorage.keyName = “value”
1.localStorage的写入，localStorage的写入有三种方法，这里介绍一下:
localStorage的使用也是遵循同源策略的，所以不同的网站直接是不能共用相同的localStorage
存储进去的是int类型，但是打印出来却是string类型，这个与localStorage本身的特点有关，localStorage只支持string类型的存储。
if(！window.localStorage){
alert("浏览器支持localstorage");
return false;
}else{
var storage=window.localStorage;
//1 写入a字段
storage["a"]=1;
//2写入b字段
storage.b=1;
//3写入c字段
storage.setItem("c",3);
console.log(typeof storage["a"]);
console.log(typeof storage["b"]);
console.log(typeof storage["c"]);
}
2.localStorage的读取
三种对localStorage的读取，其中官方推荐的是getItem\setItem这两种方法对其进行存取
if(!window.localStorage){
alert("浏览器支持localstorage");
}else{
var storage=window.localStorage;
//写入a字段
storage["a"]=1;
//写入b字段
storage.a=1;
//写入c字段
storage.setItem("c",3);
console.log(typeof storage["a"]);
console.log(typeof storage["b"]);
console.log(typeof storage["c"]);
//第一种方法读取
var a=storage.a;
console.log(a);
//第二种方法读取
var b=storage["b"];
console.log(b);
//第三种方法读取
var c=storage.getItem("c");
console.log(c);
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script>
<script type="text/javascript">
// JS操作部分
localStorage.JSa="JSA";
document.write(localStorage.JSa);
localStorage.setItem('JSb',' JSB');
document.write(localStorage.getItem('JSb'));
// JQuery操作部分
$(function(){
window.localStorage.JQa="JQA";
$("#a").text(window.localStorage.JQa);
window.localStorage.setItem('JQb','JQB');
$("#b").text(window.localStorage.getItem('JQb'));
});
</script>
</head>
<body>
<p id="a"></p>
<p id="b"></p>
</body>
</html>
具体的前端使用(实际的使用)：
/**
*checkData：这个是缓存的数据
* departId：点击的组织机构id
* departName：点击的组织机构name
*/
function userSelect(checkData,departId,departName){
var storage = getStorage();
var checkKey = newGuid();
storage.set(checkKey, checkData);
//这个跳转到人员选择页面
window.location.href = "mobile.do? webcontent/index&page=user_select&checkKey="+checkKey+"&dId="+departId+"&departName="+departName;
}
/**
* 组织选择页面（人员选择页面（或已选人员页面）跳转到组织机构页面）
* checkData：这个是缓存的人员数据
*/
function orgSelect(checkData){
var storage = getStorage();
var checkKey = newGuid();
storage.set(checkKey, checkData);
//这个跳转到组织选择页面
window.location.href = "mobile.do?webcontent/index&page=org_select&checkKey="+checkKey;
}
/**
* 已选人员页面（组织机构页面跳转到已选人员页面）
* checkData：这个是缓存的人员数据
*/
function checkUser(checkData){
var storage = getStorage();
var checkKey = newGuid();
storage.set(checkKey, checkData);
//这个跳转到已选人员页面
window.location.href = "mobile.do?webcontent/index&page=checkUser&checkKey="+checkKey;
}
/**
* 缓存对象（在此js中是全局的）
*/
var storage = null;
function getStorage(){
if(storage == null){
storage = $.localStorage;
if (!storage)
storage = $.cookieStorage;
}
return storage;
}
/**
* 获取guid作为缓存的key值
*/
function newGuid() {
var guid = "";
for (var i = 1; i <= 32; i++) {
var n = Math.floor(Math.random() * 16.0).toString(16);
guid += n;
if ((i == 8) || (i == 12) || (i == 16) || (i == 20)) guid += "-";
}
return guid;
}
/**
* 从缓存获取数据，并删除数据
*/
function getAndRemoveStorageVal(key){
var storage = getStorage();
val = storage.get(key);
storage.remove(key);
return val;
}
3.localStorage的删除和修改
修改：
if(!window.localStorage){
alert("浏览器支持localstorage");
}else{
var storage=window.localStorage;
//写入a字段
storage["a"]=1;
/*修改*/
storage.a=4;
console.log(storage.a);
}
将localStorage的所有内容清除
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.clear();
console.log(storage);
将localStorage中的某个键值对删除
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.removeItem("a");
console.log(storage.a);
4.localStorage其他注意事项
一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式
这个时候我们可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串
示例：
if(!window.localStorage){
alert("浏览器支持localstorage");
}else{
var storage=window.localStorage;
var data={
name:'bob',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
console.log(storage.data);
}
读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法
var storage=window.localStorage;
var data={
name:'bob',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
//将JSON字符串转换成为JSON对象输出
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj);
