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将会删除数据。