JS中LocalStorage与SessionStorage五种循序渐进的使用方法


Posted in Javascript onJuly 12, 2017

localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现)。

localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。

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

不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是,页面及标签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。

需求:本地记录用户上次输入的内容

使用关键技术:localStorage

第一步:使用jQuery的普通写法

1、JS代码

// 获取window的localStorage对象
var localS = window.localStorage;
// 获取localStorage的值
var getV = localS.getItem("value0"),
 getV2 = localS.getItem("value1");
// 把获取到的值赋给对应的input
$(".value0").val(getV);
$(".value1").val(getV2);
// 键盘按键弹起就设置localStorage的值
$(document).on("keyup",function(){
 // 一个输入框对应一个value值
 var va = $(".value0").val(),
  va2 = $(".value1").val();
 // 有多少个就设置setItem多少个
 localS.setItem("value0",va);
 localS.setItem("value1",va2);
});

2、效果图

JS中LocalStorage与SessionStorage五种循序渐进的使用方法

3、额额...可以用,不过,问题来了,这JS代码写的...有点乱啊,后期不好维护啊有木有!怎么办??有什么办法可以解决??

第二步:使用JS函数方法来写

1、JS代码

// 所用到的变量统一写在一起
var va,va2,getV,getV2;
// 设置localStorage方法
function localSet(){
 va = $(".value0").val(),
 va2 = $(".value1").val();
 localStorage.setItem("value0",va);
 localStorage.setItem("value1",va2);
};
// 获取localStorage方法
function localGet(){
 getV = localStorage.getItem("value0"),
 getV2 = localStorage.getItem("value1");
 $(".value0").val(getV);
 $(".value1").val(getV2);
}
// 键盘按键弹起就设置localStorage的值
$(document).on('keyup',function(){
 localSet();
});
// 页面一加载就调用设置localStorage的方法
localGet();

2、效果图

JS中LocalStorage与SessionStorage五种循序渐进的使用方法

3、嗯嗯...改为函数就很容易知道哪个是设置哪个是获取localStorage了,还可以。不过,问题来了,我不想用函数,我要用面向对象写法,怎么办??

第三步:JS面向对象的写法

1、JS代码

// 所用到的变量统一写在一起
var va,va2,getV,getV2;
var localObj = {
 // 设置localStorage方法
 localSet : function(){
  va = $(".value0").val(),
  va2 = $(".value1").val();
  localStorage.setItem("value0",va);
  localStorage.setItem("value1",va2);
 },
 // 获取localStorage方法
 localGet : function(){
  getV = localStorage.getItem("value0"),
  getV2 = localStorage.getItem("value1");
  $(".value0").val(getV);
  $(".value1").val(getV2);
 }
}
$(document).on('keyup',function(){
 localObj.localSet();
});
// 页面一加载就调用设置localStorage的方法
localObj.localGet();

2、效果图

JS中LocalStorage与SessionStorage五种循序渐进的使用方法

3、哈哈...改了一下就好了,还蛮简单的嘛!不过,问题来了,如果有很多个input框需要记录,那岂不是得写很多代码?能不能循环处理一下??

第四步:使用for循环的写法

1、JS代码

var localObj = {
 // 设置localStorage方法
 localSet : function(){
  // 我这里测试用的,所以直接选中所有的input长度,实际使用换成相同类名即可
  for (var i = 0; i < $("input").length; i++) {
   // 这里要注意,所有的localStorage的key都要相同,只是数字不同而已
   localStorage.setItem("value"+i,$(".value"+i).val());
  }
 },
 // 获取localStorage方法
 localGet : function(){
  for (var i = 0; i < $("input").length; i++) {
   // 获取对应的key值,因为这里使用的是value+数字,所以直接这样获取即可
   $(".value"+i).val(localStorage.getItem("value"+i));
  }
 }
}
$(document).on('keyup',function(){
 localObj.localSet();
});
localObj.localGet();

2、效果图

JS中LocalStorage与SessionStorage五种循序渐进的使用方法

3、呦呦...想加多少个,就加多少个value,还不错呦,代码又比较简洁。不过,问题又来了。我不想一直使用类名value+数字,我已经有写好了的类名了,我想用什么名字就用什么名字,而且不想弄一大堆localStorage,难道有100个input,就要我弄100个localStorage??我就想弄一个localStorage记录就好。怎么办??

第五步:使用json来存放localStorage

1、JS代码

var localObj = {
 localSet: function(){
  // 定一个对象,来存放键值对
  var arr = {};
   // 有多少个值,就对应写多少个,名字可随便命名
   arr.value0 = $(".value0").val();
   arr.value1 = $(".value1").val();
   arr.good = $(".good").val();
   arr.go = $(".go").val();
  // 将arr对象转换为string类型
  var his = JSON.stringify(arr);
  // 设置一个localStorage名字叫histroy,值为his
  localStorage.setItem("histroy",his);
 },
 localGet: function(){
  // 获取一个叫histroy的localStorage,存放在arr变量中
  var arr = localStorage.getItem("histroy");
  // 把获取来的arr转换成json格式
  var json = JSON.parse(arr);
  // 遍历Json中的数据
  for (var li in json) {
   // 由json字符串转换为json对象
   var value = eval("json['" + li +"']");
   // 把取到的对应的value值赋值给对应的li
   arr.li = value;
   // 最后一步,显示对应的value值
   $("."+li).val(value);
  }
 }
}
// 键盘按键弹起的时候改变localStorage的值
$(document).on('keyup',function(){
 localObj.localSet();
});
// 浏览器一打开就显示存储在localStorage里面的值
// 即记录上次输入的值
localObj.localGet();

2、效果图

JS中LocalStorage与SessionStorage五种循序渐进的使用方法

3、哇~,不错不错,到第五步,基本就已经解决了我们的需求了,不过(TMD还有问题?)哈哈哈哈。。。

1)假设不单单是input要记录上次输入内容,复选框CheckBox也要记录是否上次被选中的问题,怎么解决??

2) 百度翻译使用的是多个数组来存放多个内容,怎么弄??

 JS中LocalStorage与SessionStorage五种循序渐进的使用方法

最后:如果使用sessionStorage,直接把localStorage替换成sessionStorage就好了,其它的一模一样!!!

以上所述是小编给大家介绍的JS中LocalStorage与SessionStorage五种循序渐进的使用方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript dom 操作详解 js加强
Jul 13 Javascript
在JavaScript中获取请求的URL参数
Dec 22 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
Mar 10 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
Dec 30 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
vue2组件之select2调用的示例代码
Oct 12 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
Oct 19 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
May 29 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 #Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 #Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 #Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 #Javascript
js 监控iframe URL的变化实例代码
Jul 12 #Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 #jQuery
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 #Javascript
You might like
php,ajax实现分页
2008/03/27 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
屏蔽相应键盘按钮操作
2014/03/10 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
详解支持Angular 2的表格控件
2017/01/19 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
JavaScript函数apply()和call()用法与异同分析
2018/08/10 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
python远程登录代码
2008/04/29 Python
在Django中使用Sitemap的方法讲解
2015/07/22 Python
NLTK 3.2.4 环境搭建教程
2018/09/19 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
Python实现账号密码输错三次即锁定功能简单示例
2019/03/29 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
一家专门做特卖的网站:唯品会
2016/10/09 全球购物
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
什么是测试驱动开发(TDD)
2012/02/15 面试题
与UNIX有关的几个名词
2015/09/17 面试题
档案检查欢迎词
2014/01/13 职场文书
求职信的最佳写作思路
2014/02/01 职场文书
求职简历自我评价范例
2014/03/12 职场文书
请假条的格式
2014/04/11 职场文书
初中英语课后反思
2014/04/25 职场文书
义务教育学校标准化建设汇报材料
2014/08/16 职场文书
债务纠纷委托书范本
2014/10/14 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
家属慰问信
2015/02/14 职场文书
小学生表扬稿范文
2015/05/05 职场文书
人与自然观后感
2015/06/16 职场文书
高三毕业感言
2015/07/30 职场文书
2016年社区服务活动总结
2016/04/06 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS