html5-简单web留言功能

localStorage 方法

特点：持久化的本地存储，除非主动手动删除，否则数据一直不会过期。

方法：

1.设置

setItem(key,value)：在本地客户端存储一个字符串类型的数据。
setItem.key=value：也可以像这样直接存储。

保存数据：

localStorage.setItem(key, value);

保存添加数据例子：

//方法1向本地存储中添加一个名为name,值为"syl"的key-value对象
localStorage.setItem("name", "syl");
//方法2
localStorage["price"] = 1314;
//方法3
localStorage.amount = 520;

注：使用 setItem 方法保存数据时，将第一个参数 key 指定为键名，将第二个参数 value 指定为键值，保存时不允许保存相同的键名，保存后可以修改键值，但不允许改键名（只能重新取键名，然后再保存键值）。

2.获取

getItem(key)：读取已存储在本地的数据，获取键值。
localStorage.key：也可以像这样直接获取值。

读取数据：

localStorage.getItem(key);

注：使用 getItem 方法读取数据时，将参数指定为键名，返回键值。

3.删除

removeItem(key)：移除已存储在本地数据，通过键名作为参数删除数据。
localStorage.clear()：也可以一次性清除

删除单个数据：

localStorage.removeItem(key);

注：通过 key 删除本地数据。

例子：

<body>
  <h1>简单Web留言本</h1>
  <textarea id="memo" cols="60" rows="6"></textarea><br />
  <input type="button" value="新增留言" onclick="saveStorage('memo');" />
  <input type="button" value="清空数据" onclick="clearStorage();" />
  <input
    type="button"
    value="清空最后一个数据"
    onclick="clearsingleStorage();"
  />
  <hr />
  <p id="msg"></p>
  <script type="text/javascript">
    //savaStorage是一个新增留言的函数
    function saveStorage(id) {
      //获取textarea的value值
      var data = document.getElementById(id).value;
      //获取当前时间
      var time = new Date().toUTCString();
      //将当前时间作为键名，textarea的value值（也就是用户输入的值）的值作为键值
      localStorage.setItem(time, data);
      //显示留言
      showMsg("msg");
    }
    //showMsg是一个显示留言的函数
    function showMsg(id) {
      var result = '<table border="1">';
      //遍历本地储存数据
      for (var i = 0; i < localStorage.length; i++) {
        //获取key值
        var key = localStorage.key(i);

        //获取value值
        var value = localStorage.getItem(key);
        //显示数据
        result += "<tr><td>" + value + "</td><td>" + key + "</td></tr>";
      }
      result += "</table>";
      var target = document.getElementById(id);
      target.innerHTML = result;
    }
    //显示留言
    showMsg("msg");
    //clearStorage是一个清空留言的函数
    function clearStorage() {
      //清空数据
      localStorage.clear();
      //显示留言
      showMsg("msg");
    }
    //clearsingleStorage是一个删除单个数据的函数
    function clearsingleStorage() {
      localStorage.removeItem(localStorage.key(localStorage.length - 1));
      //显示留言
      showMsg("msg");
    }
  </script>
</body>


posted @ 2020-08-28 11:35  奋斗小青年1  阅读(1154)  评论(0)    收藏  举报