Javascript – 浏览器本地存储

一、什么是浏览器本地存储
 
比如上面的搜索历史记录, 就保存在浏览器本地存储里面
 
二、怎么实现浏览器本地存储
 
在window身上有一个localStorage属性, 这个属性有一个setItem方法, 接收两个参数,一个key,一个value.
 
注意 : key和value必须都是字符串
 
<!DOCTYPE html>
 
<html lang=”en”>
 
<head>
 
  <meta charset=”UTF-8″>
 
  <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
 
  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
 
  <title>Document</title>
 
</head>
 
<body>
 
  <h2>localStorage</h2>
 
  <button onclick=”saveData()”>点我保存一个数据</button>
 
  <script>
 
    function saveData(){
 
      window.localStorage.setItem(“msg”, “123”)
 
    }
 
  </script>
 
</body>
 
</html>
 
读取本地存储的数据
 
使用localStorage.getItem()可以读取一条数据
 
<body>
 
  <h2>localStorage</h2>
 
  <button onclick=”showData()”>点我读取一个数据</button>
 
  <script>
 
    function showData() {
 
      console.log(localStorage.getItem(‘msg’));
 
    }
 
  </script>
 
</body>
 
删除本地存储的数据
 
使用localStorage.removeItem()可以读取一条数据
 
<body>
 
  <h2>localStorage</h2>
 
  <button onclick=”removeData()”>点我删除一个数据</button>
 
  <script>
 
    function removeData() {
 
      localStorage.removeItem(‘msg’)
 
    }
 
  </script>
 
</body>
 
三、sessionStorage
 
sessionStorage上面的api和localStorage是一样的.
 
他俩的区别就是关闭浏览器后, localStorage的数据还存在, sessionStorage的数据就会消失

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64293.shtml

张贴在3