欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-02-24 08:22:43
localstorage和sessionstorage一样都是用来存储客户端临时信息的对象。 他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目...

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五种循序渐进的使用方法,希望对大家有所帮助