localStoage为当地存储，是一种永久性存储，除非手动消灭。sessionStorage是会话存储，当浏览器封闭后，存储数据会自动消灭。两种存储体式格局险些都有雷同的要领和属性；
1.localStorage.length 和 sessionStorage.length : 返回当地存储列表长度;须要申明的是能够经由过程localStorage对象猎取对应的存储数据，比方已存储了一个键为name的数据，运用localStorage.name猎取存储数据；下面的要领都是基于localStorage 对象 或 sessionStorage 对象；
2.getItem( keyName )要领：经由过程键猎取存储的数据；
3.setItem( keyName,value )要领：存储数据，keyName为存储数据的键，value现实要存储的数据（能够把keyName明白成 给要存储的数据起的名字，便于管理）；
4.removeItem( keyName )要领： 将指定键名的数据删除；
5.clear() 要领：清空一切的存储数据；
6.key() 要领： 猎取键值，须要注重的是并不能返回指定布尔值须要作进一步处置惩罚，下面是针对两种差别的存储体式格局运用一致的函数体式格局完成，迎接列位提出看法。
7.es6 版本 宣布在github 也能够运用 npm i -S feitools
/* 功用：抛出非常 , 调试运用
@param msg , 非常信息
*/
throwError : function( msg ){ // 调试运用
throw new Error( msg );
}
/* 功用：设置和猎取数据
@param key，存储的键
@param value，待存储的数据
@param boolean，辨别对象sessionStorage和localStorage
*/
setItem : function( key, value/*, boolean*/ ){
var
args = arguments,
len = args.length,
storage;
len == 0 && this.throwError('Not enough arguments to Storage.getItem.');
if( args[len-1] == true ){// 是session
storage = window.sessionStorage;
len == 1 && this.throwError('Not enough arguments to Storage.getItem.');
len >= 3 && storage.setItem( args[0], args[1] );
if( len == 2 ) return storage.getItem( args[0] );
}else{// 是local
storage = window.localStorage;
len >= 2 && storage.setItem( args[0], args[1] );
if( len == 1 ) return storage.getItem( args[0] );
}
}
/* 功用：删除存储数据
@param key，待删除的数据的键
@param boolean，辨别对象sessionStorage和localStorage
*/
removeItem : function( key, boolean){ // 删除指定 key 的存储数据
var storage;
boolean ?
storage = window.sessionStorage : storage = window.localStorage;
return storage.removeItem( key );
}
clearItem : function(/*boolean*/){// 清空一切存储
arguments[0] ? window.sessionStorage.clear() : window.localStorage.clear();
}
/* 功用：推断是不是有某一键名的数据，若存储数据存在返回true,不然返回false
@param key，指定的键名
@param boolean，辨别对象sessionStorage和localStorage
用这类体式格局推断是不是存储了某个数据，应该会好过运用getItem()要领；
*/
getKey : function( keyName/*boolean*/){ // 猎取数据存储的键
var
temp,
args = arguments;
len = args.length;
args[len-1] == true ? temp = window.sessionStorage : temp = window.localStorage;
for(var i = 0; i < temp.length; i++)
if( keyName == temp.key(i) )
return true;
return false;
}
上面的封装在运用的时刻有点纠结，运用屡次和时间长的时刻本身也不知道是运用了seeeion照样运用了local，所谓实践是检验真理的唯一标准
优化一下代码，运用组织函数体式格局完成
/*
@param way，存储体式格局，指定是session或local存储
*/
function Storage( way ){
this.map = {
'session' : window.sessionStorage,
'local' : window.localStorage
},
this.getItem = function( key ){
return this.map[way].getItem( key );
},
this.setItem = function( key, value ){
this.map[way].setItem( key,value )
},
this.removeItem = function( key ){
this.map[way].removeItem( key );
},
this.clear = function(){
this.map[way].clear();
},
this.getKey = function( key ){
//var len = map.way.length;
return key in map[way];
}
};
var local = new Storage('local');// 建立一个当地存储的实例
local.setItem('key','data');// 存储数据
local.getItem('key'); // 猎取当地存储数据
local.removeItem('key'); // 删除键名为key的存储数据
local.getKey('key'); // 推断是不是存在某一键的数据
local.clear();// 清空当地存储(删除一切的当地存储的数据)
var session = new Storage('session');// 建立一个session存储的实例
session.setItem('key','data');// 存储数据
session.getItem('key'); // 猎取session存储数据
session.removeItem('key'); // 删除键名为key的存储数据
session.getKey('key'); // 推断是不是存在某一键的数据
session.clear();// 清空会话存储(删除一切的session存储的数据)
继承优化：(运用原型对象，同享属性和要领)
function Storage( way ){
this.way = way;
};
Storage.prototype.map = {
'session' : window.sessionStorage,
'local' : window.localStorage
};
Storage.prototype.setItem = function( key, value){
this.map[this.way].setItem( key, value )
};
Storage.prototype.getItem = function( key ){
return this.map[this.way].getItem( key );
};
Storage.prototype.removeItem = function( key ){
this.map[this.way].removeItem( key )
};
Storage.prototype.clear = function(){
this.map[this.way].clear();
};
Storage.prototype.getKey = function( key ){
return key in this.map[this.way];
};
var local = new Storage('local');// 建立一个当地存储的实例
local.setItem('key','data');// 存储数据
local.getItem('key'); // 猎取当地存储数据
local.removeItem('key'); // 删除键名为key的存储数据
local.getKey('key'); // 推断是不是存在某一键的数据
local.clear();// 清空当地存储(删除一切的当地存储的数据)
再次优化代码：(针对上面的写法再来一次简化)
function Storage( way ){
this.way = way;
};
Storage.prototype = {
map : {
'session' : window.sessionStorage,
'local' : window.localStorage
},
setItem : function( key, value ){
this.map[this.way].setItem( key, value )
},
getItem : function( key ){
return this.map[this.way].getItem( key );
},
removeItem : function( key ){
this.map[this.way].removeItem( key );
},
clear : function(){
this.map[this.way].clear();
},
getKey : function( key ){
return key in this.map[this.way];
}
};
Storage.prototype.constructor = Storage;如许看起来惬意多了，悉数同享出去了，一切的实例都能够运用了，哈哈哈，亲测可用，如遇到问题能够随时交换，发明bug，也要实时反应哈
关于prototype的几点申明
只需函数被声清楚明了，就会发生对应的原型对象，即一切的函数都有原型对象，能够经由过程functionName.prototype接见原型对象。既然functionName.prototype是对象那末就能够经由过程’.’的体式格局设置属性和要领如：
function People(){};
People.prototype.name = '阿里巴巴';
People.prototype.get = function(){
console.log(this.name);
};
var people = new People(); // 实例化
console.log( people.name ); // 阿里巴巴
console.log( people.get() );// 阿里巴巴
console.log( people.constructor ); // People函数
console.log( people.__proto__.constructor ); // People函数
自定义要领优化
function Memory( key, way ){
this.way = way;
this.key = key;
};
Memory.prototype = {
constructor : Memory,
map : {
'session' : window.sessionStorage,
'local' : window.localStorage
},
setItem : function( value ){
this.map[this.way].setItem( this.key, JSON.stringify( value ) )
},
getItem : function(){
return JSON.parse( this.map[this.way].getItem( this.key ) );
},
removeItem : function(){
this.map[this.way].removeItem( this.key );
},
clear : function(){
this.map[this.way].clear();
},
getKey : function(){
return this.key in this.map[this.way];
}
};
var myStore = new Memory('key','session'); // 实例化一个对象，指定键值和存储体式格局
myStore.setItem('value'); // 指定存储的数据，能够是字符串、数字、json对象、数组。无需转换数据类型
myStore.getItem(); // 猎取存储的数据，无需指定键值。
myStore.removeItem(); // 移除数据
var session = new Memory('clear','session');
session.clear(); // 清空一切的 session 存储
var local = new Memory('clear','local');
local.clear(); // 清空一切的 local 存储
