localStorage,sessionStorage的方法重写
(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的方法重写的更多相关文章
- JQuery和JS操作LocalStorage/SessionStorage的方法
LocalStorage 是对Cookie的优化 没有时间限制的数据存储 在隐私模式下不可读取 大小限制在500万字符左右,各个浏览器不一致 在所有同源窗口中都是共享的 本质是在读写文件,数据多的话会 ...
- JQuery和JS操作LocalStorage/SessionStorage的方法(转)
出处:http://blog.csdn.net/djzhao627/article/details/50747628 首先说一下LocalStorage和SessionStorage LocalSto ...
- sessionStorage和localStorage的使用方法
1.sessionStorage sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空 JSON.pars ...
- 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用
cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...
- iOS开发和localStorage/sessionStorage
一.前言 在近期的工作中,有前端同学告诉我要清除localStorage,我当时对localStorage完全没有概念,所以就在w3c看了一下相关的内容,下面简单的介绍一下.算是对iOS开发者普及H5 ...
- localstorage,sessionstorage使用
今天看了一下HTML5,也算是简单的学习一下吧,HTML5 提供了两种在客户端存储数据的新方法:localstorage,sessionstorage. localStorage - 没有时间限制的数 ...
- 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题
移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...
- localStorage sessionStorage 和cookie等前端存储方式总结
localStorage sessionStorage 和cookie localStorage localStorage是本地存储的,除非清空本地数据 localStorage不会自动把数据发给服务 ...
- localStorage sessionStorage 增强版
1. 保留了localStorage sessionStorage的(setItem getItem removeItem clear key)api,使用上几乎差不多 2. 增强了setItem方法 ...
随机推荐
- iOS宇宙大战游戏、调试工具、各种动画、AR相册、相机图片编辑等源码
iOS精选源码 日期时间选择器,swift Space Battle 宇宙大战 SpriteKit游戏源码 LLDebugTool - 便捷的IOS调试工具(新增截屏功能) 相机扫描or长按识别二维码 ...
- vue-cli3初始化项目
1 npm install -g @vue/cli 创建配置 创建 1 vue create vue-app 选择配置 1234 ? Please pick a preset: (Use arrow ...
- 吴裕雄--天生自然Android开发学习:Android studio 3.5安装详解
3. 建立AVD(安卓虚拟设备) 点击右上角AVD Manager图标,单击按钮Create Virtual Device,选择Nexus 5X,下一步,选择版本9.0,Download,然后Next ...
- vyos的Xvlan配置方式
set interfaces bridge br0 address '172.12.12.10/24' //开启一个桥借口,用于xvlan的通信 set interfaces vxlan vxlan0 ...
- git 第一次上传本地代码到远程仓库,解决 ! [rejected] master -> master (non-fast-forward)错误
使用git想GitHub远程仓库上传代码的基本步骤一般是 初始化为git仓库 git init 添加所有要提交的文件 git add . 本次提交说明 git commit -m '提交说明' 关联G ...
- 应用场景:vue表格撤销删除与保存按钮的显隐
应用场景:vue表格撤销删除与保存按钮的显隐
- overflow属性的应用
在使用JQueryUI chosen插件的时候,由于页面布局的原因,下拉列表框超出div范围,图形效果严重变形,一点解决的思路都没有,最后请教公司前端,瞬间解决,原来使用CSS 中的overflow属 ...
- JavaScript中对象数组去重方法
在一次对后端返回的对象数组的操作时想通过indexOf()或者includes()的方法来实现对对象数组的去重但是行不通,因为用indexOf()返回的都是-1,一下记录两种对象数组(更具指定属性)去 ...
- js 创建对象的多种方式
参考: javascript 高级程序设计第三版 工厂模式 12345678910 function (name) { var obj = new Object() obj.name = name o ...
- this.props
React中的每一个组件,都包含有一个属性(props),属性主要是从父组件传递给子组件的,在组件内部,我们可以通过this.props获取属性对象