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、效果图

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、效果图

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、效果图

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、效果图

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、效果图

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

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

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

最后：如果使用sessionStorage，直接把localStorage替换成sessionStorage就好了，其它的一模一样！！！

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

# localsession  # sessionstorage  # 使用JS获取SessionStorage的值  # JS 中LocalStorage和SessionStorage的使用  # JS localStorage存储对象  # sessionStorage存储数组对象操作示例  # js前端存储之sessionStorage使用方法举例  # JavaScript中本地存储(LocalStorage)和会话存储(SessionStorage)  # JavaScript本地储存:localStorage、sessionStorage、cookie的  # JavaScript中window.sessionStorage的具体使用  # 的是  # 来了  # 多个  # 多少个  # 写在  # 转换为  # 想用  # 小编  # 面向对象  # 有多少个  # 都是  # 加载  # 什么名字  # 就好了  # 我不  # 好了  # 放在  # 还可以  # 都要  # 也就 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： HTML5空格和margin有啥区别_空格与外边距的使用场景【说明】  Laravel如何构建RESTful API_Laravel标准化API接口开发指南  利用JavaScript实现拖拽改变元素大小  如何挑选高效建站主机与优质域名？  Laravel如何处理JSON字段_Eloquent原生JSON字段类型操作教程  Laravel如何实现API版本控制_Laravel API版本化路由设计策略  如何在沈阳梯子盘古建站优化SEO排名与功能模块？  EditPlus中的正则表达式实战(5)  如何在阿里云部署织梦网站？  大连网站制作费用,大连新青年网站，五年四班里的视频怎样下载啊？  Python并发异常传播_错误处理解析【教程】  微信小程序 五星评分(包括半颗星评分)实例代码  Laravel storage目录权限问题_Laravel文件写入权限设置  黑客入侵网站服务器的常见手法有哪些？  如何获取上海专业网站定制建站电话？  文字头像制作网站推荐软件,醒图能自动配文字吗？  独立制作一个网站多少钱,建立网站需要花多少钱？  LinuxShell函数封装方法_脚本复用设计思路【教程】  详解vue.js组件化开发实践  今日头条微视频如何找选题 今日头条微视频找选题技巧【指南】  Laravel如何使用Eloquent ORM进行数据库操作？（CRUD示例）  Laravel辅助函数有哪些_Laravel Helpers常用助手函数大全  Android滚轮选择时间控件使用详解  Python企业级消息系统教程_KafkaRabbitMQ高并发应用  jimdo怎样用html5做选项卡_jimdo选项卡html5实现与切换效果【指南】  如何基于云服务器快速搭建个人网站？  Windows11怎样设置电源计划_Windows11电源计划调整攻略【指南】  如何在VPS电脑上快速搭建网站？  百度浏览器如何管理插件 百度浏览器插件管理方法  Linux系统命令中screen命令详解  Laravel如何将应用部署到生产服务器_Laravel生产环境部署流程  微信推文制作网站有哪些,怎么做微信推文，急？  电视网站制作tvbox接口,云海电视怎样自定义添加电视源？  高性能网站服务器部署指南：稳定运行与安全配置优化方案  高端云建站费用究竟需要多少预算？  济南网站建设制作公司,室内设计网站一般都有哪些功能？  手机钓鱼网站怎么制作视频,怎样拦截钓鱼网站。怎么办？  利用python获取某年中每个月的第一天和最后一天  Laravel如何实现图片防盗链功能_Laravel中间件验证Referer来源请求【方案】  东莞专业网站制作公司有哪些,东莞招聘网站哪个好？  香港服务器部署网站为何提示未备案？  如何在云虚拟主机上快速搭建个人网站？  Laravel如何使用Service Provider服务提供者_Laravel依赖注入与容器绑定【深度】  Laravel Artisan命令怎么自定义_创建自己的Laravel命令行工具完全指南  PythonWeb开发入门教程_Flask快速构建Web应用  如何制作新型网站程序文件,新型止水鱼鳞网要拆除吗？  深入理解Android中的xmlns:tools属性  Laravel Eloquent关联是什么_Laravel模型一对一与一对多关系精讲  php结合redis实现高并发下的抢购、秒杀功能的实例  JavaScript模板引擎Template.js使用详解