JS中本地存储(LocalStorage)和会话存储(sessionStorage)的使用和区别

LocalStorage是Web存储API的一部分，它允许网站在用户的浏览器中存储键值对数据。与sessionStorage不同，存储在LocalStorage中的数据没有过期时间，即使浏览器关闭后数据依然会保留，直到被明确地删除；而sessionStorage与之相反。

 1.LocalStorage的基本操作

在JavaScript中，可以通过localStorage对象来进行数据的存储和访问。以下是一些基本的操作方法：

• 存储数据：使用localStorage.setItem(key, value)方法可以将数据存储到LocalStorage中。这里的key和value都是字符串类型。 
  例：localStorage.setItem("myBro", "Tom");

• 读取数据：使用localStorage.getItem(key)方法可以读取LocalStorage中的数据。如果指定的键不存在，将返回null。 
  例：let cat = localStorage.getItem("myBro");

• 获取键名：使用localStorage.key(整数n) 方法可以读取LocalStorage中的存储位置为n的键名。如果不存在，将返回null。 
  例：localStorage.key(0); //获取第一个键名

• 删除数据：使用localStorage.removeItem(key)方法可以删除LocalStorage中的特定数据。
  例： localStorage.removeItem("myBro");

• 清除所有数据：使用localStorage.clear()方法可以清除LocalStorage中的所有数据。
  例：localStorage.clear();

2.使用代码示例 

// 存储数据
localStorage.setItem("name", "小明");
localStorage.setItem("age", "18");// 读取数据
let Name = localStorage.getItem("name");// 输出结果
console.log(Name); // 输出 "小明"// 获取第一个键名
let key1= localStorage.key(0);// 输出结果
console.log(key1); // 删除name数据
localStorage.removeItem("name");// 清空localStorage存储的所有数据
localStorage.clear();

3.LocalStorage的特点 

• 生命周期：持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的
• 存储的信息在同一域中是共享的
• 当本页操作（新增、修改、删除）了localStorage的时候，本页面不会触发storage事件,但是别的页面会触发storage事件。
• 大小：5M（跟浏览器厂商有关系）
• localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
• 受同源策略的限制

4.LocalStorage的安全性和限制

• 安全性：LocalStorage受同源策略限制，只有来自相同源（协议、域名和端口）的页面才能访问相应的数据。此外，LocalStorage中的数据通常不应该用来存储敏感信息，因为它们容易受到跨站脚本攻击（XSS）的影响。

• 存储限制：LocalStorage的存储容量限制通常为5MB左右，不同的浏览器可能会有所不同。当存储空间不足时，尝试添加新数据可能会导致QuotaExceededError异常。

• 异常处理：在使用LocalStorage时，可能会遇到SecurityError异常，例如当用户禁用LocalStorage或者页面的源不是有效的scheme/host/port组合时。

5.LocalStorage的浏览器兼容性

LocalStorage在现代浏览器中得到了广泛支持，包括Chrome、Firefox、Safari、Edge等。但是，对于使用file:或data:协议的本地文件，LocalStorage的行为未定义，可能在不同浏览器中有所不同。

 注意：

• LocalStorage无法设置过期时间
• LocalStorage只能存入字符串，无法直接存对象，如下：

localStorage.setItem('key', {name: 'value'});
console.log(localStorage.getItem('key')); //输出结果 '[object, Object]'

2.sessionStorage

sessionStorage和 localStorage使用方法基本一致，唯一不同的是生命周期，一旦页面（会话）关闭，sessionStorage 将会删除数据。