本文是针对于localStorage,sessionStorage对于object,string,number,bollean类型的存取方法
我们知道,在布尔类型的值localStorage保存到本地的时候,true会保存为字符串类型的"true",而false会保存为字符串类型的"false",
而Object类型或者数组取出来会被转化为字符串,对象转化为 '[object,object]',因为存储的时候js会默认调取toString的方法,所以在调取时候需要进行类型转换。
(function(global,undefined){
global.locMemory = {};
global.locMemory.sessionStorage = {
setItem:function(key,value,cb){
value = value || '' ;
cb = cb || function(){};
if(Array.isArray(value)){
sessionStorage.setItem(`${key}`,`arrya_${JSON.stringify(value)}`);
}
if(typeof value === 'object'){
sessionStorage.setItem(`${key}`,`object_${JSON.stringify(value)}`);
}
if(typeof value === 'string'){
sessionStorage.setItem(`${key}`,`string_${value}`);
}
if(typeof value === 'boolean'){
sessionStorage.setItem(`${key}`,`boolean_${value}`);
}
if(typeof value === 'number'){
sessionStorage.setItem(`${key}`,`number_${value}`);
}
cb();
return value;
},
getItem:function(key,cb){
value = sessionStorage.getItem(key) || '' ;
cb = cb || function(){};
var type = value.split('_')[0];
let res = value.match(/_([\s\S]*)/)[1];
if(type === 'array' || type === 'object'){
res = JSON.parse(res);
}
if(type === 'boolean'){
res = Boolean(res);
}
if(type === 'number'){
res = Number(res);
}
cb(null,res);
return res;
},
removeItem:function(key,cb){
cb = cb || function(){};
sessionStorage.removeItem(key);
cb();
},
clear:function(cb){
cb = cb || function(){};
sessionStorage.clear();
cb();
}
}
}(window))

这里在window对象中添加locMemory对象,在进行存的操作:

locMemory.sessionStorage.setItem('arr',[1,2,3]);
locMemory.sessionStorage.getItem('arr');
locMemory.sessionStorage.removeItem('arr');

locMemory.sessionStorage.clear();

这样在存取时候就不容易出现类型不对,进而报错的情况了。
其实无论是number,bollean,object,或者array,string类型,都是可以先对它进行对象序列化,JSON.stringify(),然后再进行JSON.parse()转回来即可。代码如下:

(function(global,undefined){
global.locMemory = {};
global.locMemory.sessionStorage = {
setItem:function(key,value,cb){
value = JSON.stringify(value);
value = value || '' ;
sessionStorage.setItem(`${key}`,`${value}`);
cb && cb();
return value;
},
getItem:function(key,cb){
value = sessionStorage.getItem(key) || '' ;
value = value == '' ? '' : JSON.parse(value);
cb && cb(null,value);
return value;
},
removeItem:function(key,cb){
sessionStorage.removeItem(key);
cb && cb();
},
clear:function(cb){
sessionStorage.clear();
cb && cb();
}
}
}(window)) 需要注意的是:JSON.parse()对空字符串是会报错的

localStorage,sessionStorage的方法重写的更多相关文章

  1. JQuery和JS操作LocalStorage/SessionStorage的方法

    LocalStorage 是对Cookie的优化 没有时间限制的数据存储 在隐私模式下不可读取 大小限制在500万字符左右,各个浏览器不一致 在所有同源窗口中都是共享的 本质是在读写文件,数据多的话会 ...

  2. JQuery和JS操作LocalStorage/SessionStorage的方法(转)

    出处:http://blog.csdn.net/djzhao627/article/details/50747628 首先说一下LocalStorage和SessionStorage LocalSto ...

  3. sessionStorage和localStorage的使用方法

    1.sessionStorage sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空 JSON.pars ...

  4. 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用

    cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...

  5. iOS开发和localStorage/sessionStorage

    一.前言 在近期的工作中,有前端同学告诉我要清除localStorage,我当时对localStorage完全没有概念,所以就在w3c看了一下相关的内容,下面简单的介绍一下.算是对iOS开发者普及H5 ...

  6. localstorage,sessionstorage使用

    今天看了一下HTML5,也算是简单的学习一下吧,HTML5 提供了两种在客户端存储数据的新方法:localstorage,sessionstorage. localStorage - 没有时间限制的数 ...

  7. 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题

    移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...

  8. localStorage sessionStorage 和cookie等前端存储方式总结

    localStorage sessionStorage 和cookie localStorage localStorage是本地存储的,除非清空本地数据 localStorage不会自动把数据发给服务 ...

  9. localStorage sessionStorage 增强版

    1. 保留了localStorage sessionStorage的(setItem getItem removeItem clear key)api,使用上几乎差不多 2. 增强了setItem方法 ...

随机推荐

  1. springboot整合mybatis报错:Invalid default: public abstract java.lang.Class org.mybatis.spring.annotation...

    <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis- ...

  2. [LC] 1099. Two Sum Less Than K

    Given an array A of integers and integer K, return the maximum S such that there exists i < j wit ...

  3. [LC] 76. Minimum Window Substring

    Given a string S and a string T, find the minimum window in S which will contain all the characters ...

  4. python语法基础-函数-基础-长期维护

    ###############    函数的定义调用,返回值和返回值接收    ############## def mylen(): s = "myname" i = 0 for ...

  5. Mac环境下安装Redis

    转自:http://www.jianshu.com/p/6b5eca8d908b -安装 下载安装包 redis-3.0.7.tar.gz 官网地址:http://redis.io/download ...

  6. HDU-6672-Seq

    题目传送门 ps:一般这种给一个数列求第n项,n还特别大的.要么矩阵快速幂,要么转化递推式.不过这题数据也特别多有100000组,所以就算矩阵快速幂可能也要超时,而且我还没推出来.转化递推式需要比较强 ...

  7. SQL中的子查询

    目录 WHERE子查询 HAVING子查询 FROM子查询 SELECT子查询 EXISIT子查询 查询薪资排名的员工信息(面试) z子查询就是将一个查询(子查询)的结果作为另一个查询(主查询)的数据 ...

  8. python3爬虫:利用urllib与有道翻译获得翻译结果

    在实现这一功能时遇到了一些困难,由于按照<零基础入门python>中的代码无法实现翻译,会爆出“您的请求来源非法,商业用途使用请关注有道翻译API官方网站“有道智云”: http://ai ...

  9. 吴裕雄--天生自然 R语言开发学习:高级编程

    运行的条件是一元逻辑向量(TRUE或FALSE)并且不能有缺失(NA).else部分是可选的.如果 仅有一个语句,花括号也是可以省略的. 下面的代码片段是一个例子: plot(x, y) } else ...

  10. Java正则表达式java.util.regex类的简单使用

    1.什么是正则表达式? 正则表达式(regular expression)是根据字符串集合内每个字符串共享的共同特性来描述字符串集合的一种途径.正则表达式可以用于搜索.编辑或者处理文本和数据. Jav ...