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;
}());
