HTML5中新增了Web Storage的规范，目的是解决客户端存储数据，而无需将数据持续的发回服务器。它提供了两个对象sessionStorage和localStorage，这两个对象都是以windows对象属性的形式存在的，区别在于localStorage存储的数据不会过期，sessionStorage存储的数据每次关闭浏览器后都会被清空。
为什么出这个扩展类
Web Storage的出现解决了cookie不适合浏览器存储大量数据和每次请求时，cookie都会存放在请求头中，传输到服务器端的问题。
Storage的两个实例提供了以下五个方法：
- clear()：删除所有值；Firefox中没有实现。
- getItem(name)：根据指定的name获取对应的值。
- key(index)：获得index位置处的值的名字。
- removeItem(name)：删除由name指定的名值对。
- setItem(name,value)：为指定的name设置一个对应的值。
虽然Storage的几个方法调用很简单，但是只能存储字符串格式的数据，这给实际编码过程中带来了很大的困扰，比如：当我存入一个Object数据时，每次存入之前都要数据转化成字符串，取出使用的时候也要将字符串再转化为对象，并且人为的要记住存入值的格式。
所以，为了减少重复劳动，以后少些重复代码，顺便提升下效率，所以做了一个封装。
两个操作对象EStorage.session和EStorage.local，分别对应sessionStorage和localStorage
提供了8个方法
- set(key,value)：为指定的key设置一个对应的值。
- remove(key)：删除由key指定的名值对。
- clear()：删除所有值；Firefox中没有实现。
- update 更新(key,value)。
- get(key)：根据指定的key获取对应的值。
- keyType(key)： 对应key值的数据类型
- isexist(key)： 是否存在
- getAll()： 获取所有的值,返回object
支持七种数据格式：String，Number，Boolean，Function，Date，Object，Array
特点：
1、存入什么数据类型，取出什么数据类型
2、通过原生方法存入的数据，只能取出字符串
3、与原生方法共存
4、易扩展
使用入门：
<script src="EStorage.js"></script>
<script>
var objData = {
name:王二,
age:25
}
EStorage.session.set('objData',objData);//存值
var data = EStorage.session.get('objData'); //取值
</script>
实际项目中用了，效果还可以，生了不少代码，手动微笑 -_-
最后贴上全部代码
/*
EStorage.js
2017-12-25
VERSION = "1.0.0"
DATATYPE = String,Number,Boolean,Function,Date,Object,Array 支持的数据类型
*/
var EStorage = (function () {
"use strict";
var VERSION = "1.0.0";
//支持的数据类型
var DATATYPE = 'String,Number,Boolean,Function,Date,Object,Array';
//存储类型id
var KEYWORDID = 'KEYWORDID';
//检测存入数据类型
function getType(data){
var type = Object.prototype.toString.call(data)
switch(type)
{
case '[object String]':
return 'String'
break;
case '[object Number]':
return 'Number'
break;
case "[object Boolean]":
return 'Boolean'
break;
case "[object Function]":
return 'Function'
break;
case "[object Object]":
return 'Object'
break;
case "[object Array]":
return 'Array'
break;
case "[object Date]":
return 'Date'
break;
}
}
//获取值并根据类型转换
function getValue(type,item){
switch(type)
{
case 'String':
return item
break;
case 'Number':
return Number(item)
break;
case "Boolean":
var value;
return value = (item ==='true') ? true : false;
break;
case "Function":
var fun=(new Function("return "+item))();
return fun;
break;
case "Object":
return JSON.parse(item);
break;
case "Array":
return JSON.parse(item);
break;
case "Date":
return new Date(item);
break;
default:
return item;
}
}
//存储类
function EStorage(){
this.VERSION = VERSION;
this.DATATYPE = DATATYPE;
}
//会话级存储类
EStorage.prototype.session = {
data:window.sessionStorage,
//新增或更新会话级数据
set:function(key,data){
var type = getType(data);
var saveData = '';
if(type === 'String' || type === 'Number' || type === 'Boolean' || type === 'Function' || type === 'Date'){
saveData = ''.concat(data);
}else if(type === 'Object' || type === 'Array'){
saveData = ''.concat(JSON.stringify(data));
}
this.data.setItem(key,saveData);
if(key !==KEYWORDID){
updateKeys(key,type,'set','session');
}
},
//获取会话级数据
get:function(key){
if(!isexist(key,'session')){
return;
}else{
var sessionKeys = getKeys('session');
var item = this.data.getItem(key);
return getValue(sessionKeys[key],item);
}
},
//获取所有会话级数据
getAll:function(){
var obj={};
for(var i in this.data){
//filter,只输出sessionS的私有属性
if (this.data.hasOwnProperty(i) && i !==KEYWORDID) {
obj[i] = this.get(i)
};
}
return obj;
},
//校验是否存在某个值
isexist:function(key){
return isexist(key,'session');
},
//清除会话级数据
clear:function(){
this.data.clear();
this.set(KEYWORDID,{KEYWORDID:'Object'});
},
//更新key值
update:function(key,data){
if(!isexist(key,'session')) {
return;
}
this.set(key,data);
},
//删除key值
remove:function(key){
if(!isexist(key,'session') || key ==='') {
return;
}
this.data.removeItem(key);
updateKeys(key,'','remove','session')
},
//获取数据类型
keyType:function(key){
var sessionKeys = getKeys('session');
if(isexist(key,'session')) {
return sessionKeys[key];
}
}
}
//磁盘存储类
EStorage.prototype.local = {
data:window.localStorage,
set : function(key,data){ //新增或更新浏览器永久数据
var type = getType(data);
var saveData = '';
if(type === 'String'
|| type === 'Number'
|| type === 'Boolean'
|| type === 'Function'
|| type === 'Date'){
saveData = ''.concat(data);
}else if(type === 'Object' || type === 'Array'){
saveData = ''.concat(JSON.stringify(data));
}
this.data.setItem(key,saveData);
if(key !==KEYWORDID){
updateKeys(key,type,'set','local');
}
},
//获取key值
get:function(key){
if(!isexist(key,'local')){
return;
}else{
var localKeys = getKeys('local');
var item = this.data.getItem(key);
return getValue(localKeys[key],item);
}
},
//获取所有永久数据
getAll:function(){
var obj={};
for(var i in this.data){
//filter,只输出sessionS的私有属性
if (this.data.hasOwnProperty(i) && i !==KEYWORDID) {
obj[i] = this.get(i)
};
}
return obj;
},
//校验是否存在某个值
isexist:function(key){
return isexist(key,'local');
},
//清除浏览器永久数据
clear:function(){
this.data.clear();
},
//更新key值
update:function(key,data){
if(!isexist(key,'local')) {
return;
}
this.set(key,data);
},
//删除key值
remove:function(key){
if(!isexist(key,'local')) {
return;
}
this.data.removeItem(key);
updateKeys(key,'','remove','local')
},
//获取数据类型
keyType:function(key){
var localKeys = getKeys('local');
if(isexist(key,'local')) {
return localKeys[key];
}
}
}
var storage = new EStorage()
if(!sessionStorage.getItem(KEYWORDID)){
storage.session.set(KEYWORDID,{KEYWORDID:'Object'});
}
if(!localStorage.getItem(KEYWORDID)){
storage.local.set(KEYWORDID,{KEYWORDID:'Object'});
}
//是否存在
function isexist(key,type){
if(type ==='session'){
var flag = (key && sessionStorage.getItem(key)) ? true : false;
// var sessionKeys = getKeys('session');
// var flag = (key && sessionKeys[key]) ? true : false;
return flag;
}else if(type ==='local'){
// var localKeys = getKeys('local');
// var flag = (key && localKeys[key]) ? true : false;
var flag = (key && localStorage.getItem(key)) ? true : false;
return flag;
}
}
//获取key列表
function getKeys(type){
if(type ==='session'){
var item = sessionStorage.getItem(KEYWORDID);
return getValue('Object',item);
}else if(type ==='local'){
var item = localStorage.getItem(KEYWORDID);
return getValue('Object',item);
}
}
//更新key值类型
function updateKeys(key,keytype,operate,saveType){
var keys = saveType ==='session' ? storage.session.get(KEYWORDID) : storage.local.get(KEYWORDID);
switch(operate)
{
case 'set':
keys[key] = keytype;
break;
case 'remove':
delete keys[key];
break;
case 'clear':
for(var i in keys){
if(i !==KEYWORDID){
delete keys[i];
}
}
break;
}
saveType ==='session' ? storage.session.set(KEYWORDID,keys) :
storage.local.set(KEYWORDID,keys);
}
//对外提供接口
return storage;
}());
