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 存储