LocalStorage与sessionStorage相同，用于存储客户端的临时信息。

它们只能存储字符串类型的对象(尽管规范中可以存储其他本机对象，但迄今为止还没有浏览器实现它们)。

本地存储生命周期是永久的，这意味着本地存储信息将永远存在，除非用户在浏览器提供的用户界面上显示它。

会话的生命周期存储是当前窗口或选项卡。一旦窗口或选项卡永久关闭，会话存储的所有数据都将被清空。

不同的浏览器不能在本地存储或会话存储中共享信息。同一浏览器中的不同页面可以共享相同的本地存储(页面属于相同的域名和端口)，但会话存储信息不能在不同的页面或选项卡之间共享。这里需要注意的是，页面和选项卡仅指顶层窗口。如果一个选项卡包含多个iframe选项卡，并且它们属于同一个源页面，则它们可以共享sessionStorage。

要求：在本地记录用户的最后一次输入

使用关键技术：本地存储

第一步：使用jQuery的常用写法

1.JS代码

//获取窗口的localStorage对象var localS=window.localStorage//获取local storage var getv=locales . getitem(' value 0 ')、getv2=locales.getitem ('value1 ')的值；//将获取的值分配给相应的输入$(. value 0 ')。val(GetV)；$(. value 1 ')。val(getV2)；//设置值$(文档)。on ('keyup '，function(){//一个输入框对应一个value值varva=$(. value 0 ')。val()，va2=$ ('.value1 ')。val()；//将setitems设置为多个区域设置。现有的setitems ('value0 '，va );localS.setItem('value1 '，va2)；});2.翻译

3、金额.可以使用，但是问题来了，这个JS代码是这样写的.有点乱，而且后期很难维护！怎么办？有什么办法解决吗？

第二步：用JS函数方法写

1.JS代码

//使用的变量写在一起：var va，va2，getV，getV 2；//设置localStorage方法function local set(){ va=$(. value 0 ')。val()，va2=$ ('.value1 ')。val()；localStorage.setItem('value0 '，va)；localStorage.setItem('value1 '，va2)；};//获取localStorage方法function local get(){ getv=local storage . getitem(' value 0 ')，get v2=local storage . getitem(' value 1 ')；$(. value 0 ')。val(GetV)；$(. value 1 ')。val(getV2)；}//设置localStorage $(文档)的值。on ('keyup '，function(){ local set()；});//页面一加载就调用localGet()方法设置localStorage2.翻译

3.嗯嗯.很容易知道设置哪个和获取哪个本地存储。没关系。但是，问题是，我不想用函数，我想用面向对象的写作，我该怎么办？

第三步：JS面向对象的编写

1.JS代码

//使用的变量写在一起：var va，va2，getV，getV 2；Var localObj={//set localStorage方法local set : function(){ va=$(. value 0 ')。val()，va2=$ ('.value1 ')。val()；localStorage.setItem('value0 '，va)；localStorage.setItem('value1 '，va2)；}，//获取localStorage方法local get : function(){ getv=local storage . getitem(' value 0 ')，get v2=local storage . getitem(' value 1 ')；$(. value 0 ')。val(GetV)；$(. value 1 ')。val(getV2)；}}$(文档)。on('keyup '，function(){ LocalObj . LocalSet()；});//页面一加载就调用localObj.localGet()方法设置localStorage2.翻译

3.哈哈的笑.换换环境就好了。挺简单的！但是，问题是如果有很多输入框要记录，就不用写很多代码了吗？能回收吗？

步骤4:使用for循环

1.JS代码

Var localObj={//设置localStorage方法localSet :函数(){//我在这里使用它进行测试，所以我直接选择所有的输入长度，用相同的名称替换，以便实际使用(var I=0；i $(“输入”)。长度；I) {//这里需要注意的是，所有localStorages的键都是一样的，只是编号不同。本地存储。setitem ('value' i，$(')。值' I)。val())；}}，//获取localStorage方法local get: function(){ for(var I=0；i $(“输入”)。长度；I) {//获取对应的键值，因为这里使用的是数值，所以可以直接获取为$('。值' I)。val (localstorage。getitem(' value ' I))；} }}$(文档)。on('keyup '，function(){ LocalObj . LocalSet()；});local obj . LocalGet()；2.翻译

3、溜溜球.想加多少值就加多少，还不错，代码也比较简单。然而，问题又来了。我不想一直用类名的数值。我已经有了一个书面的班级名称。我可以用任何我想要的名字，我不想得到很多本地存储。如果有100个输入，我必须得到100个本地存储。我只想得到一个本地存储记录。怎么办？

步骤5:使用json存储本地存储

1.JS代码

var local obj={ local set : function(){//设置一个对象来存储键值对var arr={ }；//写尽可能多的值，并命名为arr . value 0=$(. value 0 ')。val()；arr . value 1=$(. value 1 ')。val()；arr.good=$('。很好)。val()；arr.go=$('。go’)。val()；//将arr对象转换为字符串类型var his=JSON。stringfy(arr)；//设置一个名为histroy且值为hislocal storage . setitem(' histroy '，his)的localStorage}，localGet:函数(){ //获取一个名为histroy的localStorage，并将其存储在arr变量中。var arr=local storage . getitem(' histroy ')；//将获取的arr转换为json格式var JSON=JSON . parse(arr)；//遍历json中的数据for(json中的var Li){//将Json字符串转换为Json对象var值=eval(' Json[' Li ' ']')；//将获取的对应值赋给对应的li arr.li=value//在最后一步中，显示相应的值$(' . '李)。val(值)；} } }//更改localStorage $(文档)的值。on ('keyup '，function () {localobj。local set()；});//浏览器一打开就会显示localStorage中存储的值//即记录最后一个输入值local obj . localget()；2.翻译

3.哇~，还不错。到第五步，我们的需求已经基本解决了，但是(TMD还有问题？)哈哈哈哈。

1)假设不仅input应该记录最后一次输入，CheckBox也应该记录最后一次是否被选中。如何解决？

2)百度翻译用多个数组存储多个内容，怎么做？

最后：如果使用了sessionStorage，只需用sessionStorage替换localStorage即可。其他的都一模一样！

以上就是边肖介绍的JS中LocalStorage和SessionStorage的五种逐步使用方法，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！