input中输入值,利用localStorage在网页刷新之后不被删除

283 阅读1分钟
  • 壹, 我们要知道***localStorage*** 是用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除

    • 我们要通过onblur事件调用函数price()
    • onblur事件是当用户离开input输入框时执行(也就是失去焦点)

写出Html部分为

  <input type="text" onblur="price()" id="worth">

我们要获取input在第一次页面加载完成用户输入的值那么就是

      var x = document.getElementById("worth");

localStorage有如下几个可用的API:

  • 存储:localStorage.setItem(key,value);
  • 读取:localStorage.getItem(key);
  • 删除单个数据:localStorage.removeItem(key);
  • 删除所有数据:localStorage.clear();
  • 得到某个索引的key:localStorage.key(index);

完整思路就是:

  • 1.在price()函数中写入变量x获取id值为worth的input标签中用户输入的值
  • 2.通过**onblur事件调用函数**
  • 3.调用函数中使用localStorage.setItem(key,value)这个API去存储完成第一次页面加载之后用户输入的值在第二次完成页面加载(也就是刷新页面)之后 localStorage.setItem(key,value)中调取存储的值( 第一次页面完成加载之后用户输入的值**)显示到第二次页面加载之中input标签中
  • 4.完成在不断刷新之后也能看到第一次页面加载完成之后用户输入的值.
    function price() {
      var x = document.getElementById("worth");
      localStorage.setItem("sitename", x.value);
    }
    document.getElementById("worth").value = localStorage.getItem("sitename");
​