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方法 ...
随机推荐
- 5-7 学生cpp成绩统计
完成“学生cpp成绩计算”之后,修改Person和Student类,各自增加两个无参构造函数. 仍以Person类为基础,建立一个派生类Teacher,增加以下成员数据: int ID;//教师工号 ...
- linux的nohup命令的用法(后台运行程序命令)
linux的nohup命令的用法. 在应用Unix/Linux时,我们一般想让某个程序在后台运行,于是我们将常会用 & 在程序结尾来让程序自动运行.比如我们要运行mysql在后台: /usr/ ...
- [LC] 13. Roman to Integer
Roman numerals are represented by seven different symbols: I, V, X, L, C, Dand M. Symbol Value I 1 V ...
- 系统学习javaweb重点难点1--如何区分<input/>框里的三种常用属性:type属性 name属性 和 value属性
感想:这是我系统学习javaweb的时候感觉这个是一个初学者十分容易搞混的点 学习笔记: 首先,是type属性. 表单输入项标签之一,用户可以在该标签上通过填写和选择进行数据输入. type属性设置该 ...
- getResource()和getResourceAsStream()以及路径问题
用JAVA获取文件,听似简单,但对于很多像我这样的新人来说,还是掌握颇浅,用起来感觉颇深,大常最经常用的,就是用JAVA的File类,如要取得c:/test.txt文件,就会这样用File file ...
- SSL_CTX结构体
/* 定义在ssl.h头文件中 */struct ssl_ctx_st { SSL_METHOD *method; unsigned long options; unsigned long mode; ...
- Jmeter之CSV文件读取
注意execl表生成的CSV文件的文件编码是GB2312和分隔符就好了
- JS做深度学习3——数据结构
最近在上海上班了,很久没有写博客了,闲下来继续关注和研究Tensorflow.js 关于深度学习的文章我也已经写了不少,部分早期作品可能包含了不少错误的认识,在后面的博文中会改进或重新审视. 今天聊聊 ...
- Navicat远程连接服务器Mysql
使用NAVICAT远程访问MYSQL的步骤 1.修改远程访问权限 //进入MySQL服务器或使用其它工具 xxxx@ubuntu:/$ mysql -h localhost -u root -p xx ...
- 2019-04-18-NFV基础概念
NFV技术的起源和概念 在移动互联网时代,运营商面临内外困局.就自身而言,采用的流量增长-网络扩容-收入增长的商业模型正在失效,庞大.僵化的电信基础网络,不能够满足用户的丰富需求:就竞争对手而言,互联 ...