JavaScript 本地存储

灰太狼 2023-09-24 12:45 69阅读 0赞

#### 文章目录 ####

*   *  1.本地存储简介
     *  2.window.sessionStorage
     *  3.window.localStorage
     *  4.记住用户名

### 1.本地存储简介 ###

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，会经常在本地存储大量的数据，HTML5 规范提出了相关解决方案。

> 特性：  
> ① 数据存储在用户浏览器中；  
> ② 设置、读取方便，甚至页面刷新不丢数据；  
> ③ 容量较大，sessionStorage 约5M、localStorage 约20M；  
> ④ 只能存储字符串，可以将对象 JSON.stringify() 编码后存储

### 2.window.sessionStorage ###

> 特点：  
> ① 生命周期为关闭浏览器窗口；  
> ② 在同一个窗口（页面）下数据可以共享；  
> ③ 以键值对的形式存储使用。

//1.存储数据
    sessionStorage.setItem(key, value);
    //2.获取数据
    sessionStorage.getItem(key);
    //3.删除数据
    sessionStorage.removeItem(key);
    //4.清空所有数据
    sessionStorage.clear();

<!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>
      <input type="text" class="uname" />
      <input type="password" class="upwd" />
      <button class="set">保存数据</button>
      <button class="get">获取数据</button>
      <button class="remove">删除数据</button>
      <button class="clear">清空所有数据</button>
      <script>
        var ipts = document.querySelectorAll('input');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var remove = document.querySelector('.remove');
        var clear = document.querySelector('.clear');
        set.addEventListener('click', function() {
          
          sessionStorage.setItem('uname', ipts[0].value);
          sessionStorage.setItem('upwd', ipts[1].value);
        })
        get.addEventListener('click', function() {
          
          uname = sessionStorage.getItem('uname');
          upwd = sessionStorage.getItem('upwd');
          alert(uname + '，' + upwd);
        })
        remove.addEventListener('click', function() {
          
          sessionStorage.removeItem('uname');
          sessionStorage.removeItem('upwd');
        })
        clear.addEventListener('click', function() {
          
          sessionStorage.clear();
        })
      </script>
    </body>
    </html>

运行结果：  
![在这里插入图片描述][8e9cfedb91844b34bf7204e2ce631650.png_pic_center]  
你可以通过 F12 键到我们的后台去查看，Application → Session Storage → file://  
![在这里插入图片描述][c765c0d75351469eb902a22156813d25.png_pic_center]

`只要没关闭浏览器窗口，不管怎么刷新页面数据永远都在！`

### 3.window.localStorage ###

> 特点：  
> ① 生命周期永久生效，除非手动删除，否则即使关闭页面信息也会存在；  
> ② 可以多窗口（页面）共享（同一浏览器）；  
> ③ 以键值对的形式存储使用。

//存储数据
    localStorage.setItem(key, value);
    //2.获取数据
    localStorage.getItem(key);
    //3.删除数据
    localStorage.removeItem(key);
    //4.清空所有数据
    localStorage.clear();

### 4.记住用户名 ###

案例分析：  
① 把数据存起来，用到本地数据；  
② 关闭页面，也可以显示用户名，所以用到 localStorage；  
③ 打开页面，先判断是否有这个用户名，如果有，就在表单里显示用户名，并且勾选复选框。

[8e9cfedb91844b34bf7204e2ce631650.png_pic_center]: https://img-blog.csdnimg.cn/8e9cfedb91844b34bf7204e2ce631650.png#pic_center
[c765c0d75351469eb902a22156813d25.png_pic_center]: https://img-blog.csdnimg.cn/c765c0d75351469eb902a22156813d25.png#pic_center