本文是针对于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. 4)在url中加上a分发参数,用来选哪一个函数

    文件关系目录展示: 然后代码改动部分展示: zixun.controller.class.php <?php //header('Content-type:text/html;charset=u ...

  2. UFT参数化

    1.Resources-Record and Run Settings 2.打开程序进行录制操作 3.对Fly from和Fly to进行参数化 4.选中点击 5.输入名称,点击OK 6.在Data加 ...

  3. nginx负载均衡如何实现

    什么是nginx?Nginx("engine x")是一款是由俄罗斯的程序设计师Igor Sysoev所开发高性能的Web和反向代理服务器,也是一个 IMAP/POP3/SMTP ...

  4. 网页中常见返回HTTP状态码含义

    在日常网页浏览的过程中大家经常会碰到400,403,404,500,502等HTTP状态码,这些状态码对于一般用户来说出现什么都是一样的,反正就是页面打不开了,但是作为网站开发人员或者从事相关工作者认 ...

  5. 测试误区《二》 python逻辑运算和关系运算优先级

    关系运算 关系运算就是对2个对象进行比较,通过比较符判断进行比较,有6种方式. x > y 大于 x >= y 大于等于 x < y 小于 x <= y 小于等于 x = y ...

  6. Transformer详解:各个特征维度分析推导

    谷歌在文章<Attention is all you need>中提出的transformer模型.如图主要架构:同样为encoder-decoder模式,左边部分是encoder,右边部 ...

  7. unittest(11)- get_data自定义取某几条测试数据

    在get_data中定义取全部用例和取部分用例两种模式 # 1. http_request.py import requests class HttpRequest: def http_request ...

  8. js 实现排序算法 -- 冒泡排序(Bubble Sort)

    原文: 十大经典排序算法(动图演示) 冒泡排序(Bubble Sort) 冒泡排序是一种简单的排序算法.它重复地走访过要排序的数列,一次比较两个元素,如果它们的顺序错误就把它们交换过来.走访数列的工作 ...

  9. JavaScript 中事件对象参数:clientX、clientY、offsetX、offsetY、screenX、screenY

    JavaScript 中一些概念理解 :clientX.clientY.offsetX.offsetY.screenX.screenY clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x ...

  10. 浅谈JobExecutionContext & JobDataMap

    JobExecutionContext是什么? 当Scheduler调用一个Job,就会将JobExecutionContext传递给Job的 execute() 方法: Job能通过JobExecu ...