Javascript localStorage 的简单使用

最新推荐文章于 2021-02-03 09:03:58 发布

H_MZ

最新推荐文章于 2021-02-03 09:03:58 发布

阅读量136

点赞数

文章标签： javascript json python ViewUI

原文链接：https://my.oschina.net/u/265943/blog/292894

版权

2019独角兽企业重金招聘Python工程师标准>>>

Javascript 中我们可以使用 localStorage 来保存我们的输入框数据，这样在刷新或者提交出错的时候不会出现信息丢失。这里主要是这两个方法 setitem() 与getItem() 来操作 localStorage 的数据，还有一个是 clear 用来清空 localStorage 的数据。

下面就来举个简单的例子，先看html代码

<input type="text" value="" />
<button type="button" onclick="myButtonClicked('text1')">Click Me</button>

<input type="text" value="" />
<button type="button" onclick="myButtonClicked('text2')">Click Me</button>

这里有两个按钮和两个输入框;现在我们就来使用 localStorage 的数据存储来保存数据吧。

//在点击按钮的时候储存信息
function myButtonClicked(id)
{ 
 var aLocalStorage = [];
 if(localStorage.getItem('myLocalStorage') != null)
 {
  aLocalStorage = JSON.parse(localStorage.getItem('myLocalStorage'));
  //get stored item from localStorage by json parsing
 }

    aLocalStorage.push(id);
    aLocalStorage.push(document.getElementById(id).value);

    localStorage.setItem('myLocalStorage', JSON.stringify(aLocalStorage));
    //stored the entered element id and value in localStorage by doing stringify
}

当页面重新加载时，我们需要把储存的数据放回到文本框

$(document).ready(function()
{
 retainValues(); 
});

function retainValues()
{
 if(localStorage.getItem('myLocalStorage') != null) {
  var aLocalStorage =[];
  aLocalStorage = JSON.parse(localStorage.getItem('myLocalStorage'));

  var i = 0;
  while (i < aLocalStorage.length)
  {   
   if (document.getElementById(aLocalStorage[i]) != null) {
    document.getElementById(aLocalStorage[i]).value = aLocalStorage[i+1];
   }
   i = i + 2;
  }
 }
}

转载于:https://my.oschina.net/u/265943/blog/292894