本地存储(localStorage)和会话存储(sessionStorage)

本地存储和会话存储

本文对本地存储和绘画存储有一个清晰的解释

前提

1. 在任意网页按F12打开开发者工具
2. 这里用一个空白页演示

   1. 

   2. 点击应用，有的浏览器可能叫Application

   3. 在存储下面会看到本地存储空间和会话存储空间，这两个存储空间都是以键值对的方式存储数据

   4. 本地存储和会话存储主要区别在于，关闭浏览器后存储在会话存储会消失

示例

1. 使用本地存储（localStorage）

2. 在控制台执行如下代码

3. localStorage.setItem("username",'mucd')
   

4. 效果：

5. 可以看到已经被存储进来了

6. 那么本地存储（localStorage）是什么类型的呢？使用typeof来查看一下

7. typeof localStorage
   

8. 

本地存储获取键值对

刚才演示了如何设置键值对，那么设置完成后要怎么获取呢？

1. //根据key来获取value
   let username = localStaorage.getItem("username")
   console.log(username)
   

2. 

3. 如果获取一个不存在的key，返回的则是一个null

本地会话存储并且获取数组

很多时候我们希望存储一个数组，但是localStorage有个限制，会将数组转为字符串

1. // 定义ProgrammingLanguage数组
   let pl = ['Java', 'Python', 'JavaScript', 'GO+']
   // 本地存储存储 ProgrammingLanguage数组
   localStorage.setItem('arr', pl);
   

2. 

3. 可以看到是一个string类型的结果，这样是不符合我们的需求的，但是我们要怎么解决呢？

4. 这里可以使用JSON.stringify

5. // 定义ProgrammingLanguage数组
   let pl = ['Java', 'Python', 'JavaScript', 'GO+']
   // 本地存储存储 ProgrammingLanguage数组
   localStorage.setItem('arr', JSON.stringify(pl));
   

6. 

7. 存储ok了，接下来就是获取

8. 使用JSON.parse()获取

9. let arr = localStorage.getItem("arr")
   console.log(JSON.parse(arr))
   

10. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hyukdCHQ-1648085852210)(C:\Users\mucd\AppData\Roaming\Typora\typora-user-images\1648084662817.png)]

1. JSON.stringify：将数组设置为本地存储中的值。
2. JSON.parse：从本地存储中获取数组。

清除本地存储

1. 清理之前的本地存储

   1. 

2. 清理之后的本地存储

   1. localStorage.clear()
      

   2. 

3. 这是清除所有的本地存储，如果需要只清除某一个本地存储呢？

   1. localStorage.removeItem('username')
      

会话存储

进行和本地存储类似的操作，只需要把localStorage改成sessionStorage

1. 示例

   1. // 示例1
      sessionStorage.setItem('username', 'uiu');
      
      // 示例2
      sessionStorage.getItem('username');
      
      // 示例4
      let pl = ['Java', 'Python', 'JavaScript', 'GO+']
      sessionStorage.setItem('pl',JSON.stringify(pl));
      
      // 示例6
      console.log(JSON.parse(sessionStorage.getItem('pl')));
      
      // 示例7
      sessionStorage.clear()
      
      // 示例8
      sessionStorage.removeItem('username');
      

   2. 结果存储在会话存储空间

   3. 

   4. 但是此时我们关闭浏览器再打开，就会发现会话存储空间的数据已经消失了，但是本地存储空间的数据还是存在的。这就是本地存储空间和会话存储空间的区别！

2. MDN的解释

3. 窗口界面的 localStorage 只读属性允许您访问 Document 来源的 Storage 对象；存储的数据跨浏览器会话保存。

   只读 sessionStorage 属性访问当前源的会话存储对象。sessionStorage 类似于 localStorage；不同之处在于，虽然 localStorage 中的数据不会过期，但 sessionStorage 中的数据会在页面会话结束时被清除。