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 SocialHistory 检查访问者是否访问过某站点
Aug 02 Javascript
javascript 实用的文字链提示框效果
Jun 30 Javascript
JavaScript 学习笔记之数据类型
Jan 14 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
怎样判断jQuery当前元素是隐藏还是显示
Nov 23 Javascript
Bootstrap轮播图学习使用
Feb 10 Javascript
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 Javascript
vue  自定义组件实现通讯录功能
Sep 30 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
Mar 10 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
PHP4之COOKIE支持详解
2006/10/09 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
学习PHP Cookie处理函数
2016/08/09 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
在JavaScript并非所有的一切都是对象
2013/04/11 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
2015/01/05 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
node.js中fs文件系统模块的使用方法实例详解
2020/02/13 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
教你用一行Python代码实现并行任务(附代码)
2018/02/02 Python
python批量修改图片大小的方法
2018/07/24 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
python 常见的反爬虫策略
2020/09/27 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
Nike比利时官网:Nike.com (BE)
2019/02/07 全球购物
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
高校毕业生登记表自我鉴定
2013/11/03 职场文书
2014年外联部工作总结
2014/11/17 职场文书
2014年人大工作总结
2014/12/10 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
财务经理岗位职责
2015/01/31 职场文书
JS代码编译器Monaco使用方法
2021/06/11 Javascript
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫