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 相关文章推荐
jquery nth-child()选择器的简单应用
Jul 10 Javascript
js优化针对IE6.0起作用(详细整理)
Dec 25 Javascript
JavaScript数值转换的三种方式总结
Jul 31 Javascript
判断访客终端类型集锦
Jun 05 Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 Javascript
js文本框输入内容智能提示效果
Dec 02 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
利用css+原生js制作简单的钟表
Apr 07 Javascript
node 利用进程通信实现Cluster共享内存
Oct 27 Javascript
Node.js中sequelize时区的配置方法
Dec 10 Javascript
Javascript读写cookie的实例源码
Mar 16 Javascript
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
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
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
javascript学习之闭包分析
2010/12/02 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
js实现随机点名小功能
2017/08/17 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
2018/03/05 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
浅谈pytorch和Numpy的区别以及相互转换方法
2018/07/26 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
使用python绘制二元函数图像的实例
2019/02/12 Python
自定义django admin model表单提交的例子
2019/08/23 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
The North Face北面德国官网:美国著名户外品牌
2018/12/12 全球购物
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
项目合作计划书
2014/01/09 职场文书
超市端午节活动方案
2014/01/23 职场文书
广告创意求职信
2014/03/17 职场文书
《故乡》教学反思
2014/04/10 职场文书
大学生创业计划书
2014/08/14 职场文书
研修心得体会
2014/09/04 职场文书
党员个人剖析材料2014
2014/10/08 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
太空授课观后感
2015/06/17 职场文书
岗位聘任协议书
2015/09/21 职场文书
vue使用watch监听属性变化
2022/04/30 Vue.js
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技