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中的delete运算符
Nov 30 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
jquery小火箭返回顶部代码分享
Aug 19 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
JavaScript设计模式之代理模式实例分析
Jan 16 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 Javascript
Vue实现简单的留言板
Oct 23 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
短波的认识
2021/03/01 无线电
php shell超强免杀、减少体积工具实现代码
2012/10/16 PHP
用cssText批量修改样式
2009/08/29 Javascript
JavaScript 语言的递归编程
2010/05/18 Javascript
jquery选择器(常用选择器说明)
2010/09/28 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
webpack配置的最佳实践分享
2017/04/21 Javascript
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
vue+express 构建后台管理系统的示例代码
2018/07/19 Javascript
angular6的table组件开发的实现示例
2018/12/26 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
Python中的index()方法使用教程
2015/05/18 Python
详解duck typing鸭子类型程序设计与Python的实现示例
2016/06/03 Python
Python实现登录接口的示例代码
2017/07/21 Python
TensorFlow搭建神经网络最佳实践
2018/03/09 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
python 画二维、三维点之间的线段实现方法
2019/07/07 Python
pandas如何处理缺失值
2019/07/31 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
美国市场上最实惠的送餐服务:Dinnerly
2018/03/18 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
班主任工作经验材料
2014/02/02 职场文书
外语系大学生自荐信范文
2014/03/01 职场文书
入党自我鉴定
2014/03/25 职场文书
企业文明单位申报材料
2014/05/16 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
安装工程师岗位职责
2015/02/13 职场文书
离婚民事起诉状
2015/08/03 职场文书
python Django框架快速入门教程(后台管理)
2021/07/21 Python
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫