本文是针对于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. JavaScript中遍历数组,最好不要用for...in

    先看一段代码 var arr = [2,3,4,5]; for(var i = 0; i < arr.length; i++){ console.log(i,"类型:"+ty ...

  2. iOS 开发中有关pch文件,以及pch常用的内容

    一.创建pch文件.点击command+N.如下图操作 命名规则一般都是:项目名称-Prefix 第二步 OK,到这里已经把pch文件制作完毕.接下来就可以用了. pch文件一般书写的是全局都可以用到 ...

  3. MOOC(14)- 从数据库中获取预期结果

    数据库中的预期结果写的是SQL语句 从表格中读取到SQL语句,再去数据库获取真正的预期结果 # -*- coding: utf-8 -*- # @Time : 2020/2/18 9:50 # @Fi ...

  4. vscode中的live-server配置https?

    json文件中使用绝对路径添加证书 "liveServer.settings.https": { "enable": true, "cert" ...

  5. FPGA浮点数定点数的处理

    http://blog.chinaaet.com/justlxy/p/5100053166大佬博客,讲的非常有条理的 1,基础知识 (1)定点数的基础认知: 首先例如一个16位的数表示的定点数的范围是 ...

  6. highcharts series几种写法

    一.数据列 数据列是一组数据集合,例如一条线,一组柱形等.图表中所有点的数据都来自数据列对象,数据列的基本构造是: series : [{ name : '', data : [] }] 提示:数据列 ...

  7. 蒲公英Ghost Win 7 Sp1(x86/x64)旗舰版 201910

    蒲公英Ghost Win 7 Sp1(x86/x64)旗舰版 201910 <ignore_js_op>  <ignore_js_op> <ignore_js_op> ...

  8. Qt QImage的浅拷贝与深拷贝

    首先简单说说什么是浅拷贝和深拷贝:浅拷贝就比如像引用类型,而深拷贝就比如值类型,即浅拷贝是共用一块内存的,而深拷贝是复制一份内容. 我们再来看看QImage类的几个构造函数: // 浅拷贝 QImag ...

  9. 吴裕雄--天生自然KITTEN编程:拾金币

  10. [人工智能]Pytorch基础

    PyTorch基础 摘抄自<深度学习之Pytorch>. Tensor(张量) PyTorch里面处理的最基本的操作对象就是Tensor,表示的是一个多维矩阵,比如零维矩阵就是一个点,一维 ...