一、sessionStorage
1、简介
sessionStorage用于在浏览器会话期间存储数据，数据仅在当前会话期间有效。
存储的数据在用户关闭浏览器标签页或窗口后会被清除。
2、方法
- 使用sessionStorage.setItem(key, value)方法将数据存储在sessionStorage中。
- 使用sessionStorage.getItem(key)方法根据键获取存储的值。
- 使用sessionStorage.removeItem(key)方法根据键删除存储的值。
3、代码示例
列表页搜索条件缓存, 使用sessionStorage实现简单的功能,
存储数据+读取数据+清除数据
a、存取单个数据
sessionStorage.setItem("param", "我叫你一声你敢答应吗?");
let param = sessionStorage.getItem("param")
//我叫你一声你敢答应吗?
console.log(param );
b、存取对象
sessionStorage也可存储Json对象：
存储时，通过JSON.stringify()将对象转换为文本格式；
读取时，通过JSON.parse()将文本转换回对象。
sessionStorage.setItem("queryParams", JSON.stringify(this.queryParams));
if (sessionStorage.getItem("queryParams")) {this.queryParams = JSON.parse(sessionStorage.getItem("queryParams"));
}
c、清除数据
sessionStorage.removeItem("queryParams");
二、localStorage
1、简介
- localStorage用于在浏览器中永久存储数据，即使用户关闭浏览器标签页或窗口，数据仍然保留。
- 存储的数据不会自动过期，除非显式地从代码中删除或用户清除浏览器缓存。
- 存放数据大小一般为5MB；
- 仅在浏览器中保存，不参与服务器通信；
2、方法
- 使用localStorage.setItem(key, value)方法将数据存储在localStorage中。
- 使用localStorage.getItem(key)方法根据键获取存储的值。
- 使用localStorage.removeItem(key)方法根据键删除存储的值。
3、代码示例
// 设置localStorage中的数据
localStorage.setItem('key', 'value');
// 获取localStorage中的数据
const value = localStorage.getItem('key');
console.log(value); // 输出：value
// 删除localStorage中的数据
localStorage.removeItem('key');
三、cookie
1、简介
- Cookie是一种在浏览器中存储数据的机制，用于跟踪和识别用户。
- 可以设置Cookie的过期时间，使数据在指定时间后失效。
- 即使用户关闭浏览器，存储在Cookie中的数据也可以保留，除非设置了过期时间。
2、方法
- 使用document.cookie属性进行设置和获取Cookie值。
- 使用document.cookie = "key=value; expires=expiration_time; path=/;"语法设置Cookie。
- 使用document.cookie获取所有Cookie值。
- 使用document.cookie = "key=; expires=expiration_time; path=/;"语法删除Cookie。
3、代码示例
// 设置cookie
document.cookie = "key=value; expires=expiration_time; path=/;";
// 获取所有cookie
const cookies = document.cookie;
console.log(cookies);
// 删除cookie
document.cookie = "key=; expires=expiration_time; path=/;";
四、三者区别
这些存储机制各有优劣和适用场景。sessionStorage适用于在会话期间保持数据，
localStorage适用于需要永久存储数据的场景，
而Cookie用于跟踪用户和设置过期时间的需求。根据具体的应用需求，选择适合的存储机制可以更好地管理和存储数据。
1、sessionStorage与localStorage区别
- sessionStorage在浏览器会话期间有效，而localStorage是持久的。
- sessionStorage在用户关闭浏览器标签页或窗口时会被清除，而localStorage会一直保留。
- sessionStorage和localStorage的使用方法相似，都是使用setItem、getItem和removeItem方法进行操作。
2、sessionStorage、localStorage、cookie区别
- 存储容量：sessionStorage和localStorage都提供了大约5MB的存储空间，而Cookie只能存储4KB的数据。
- 生命周期：sessionStorage的数据在单个会话期间有效，关闭浏览器后数据将被清除；localStorage的数据是永久性的，除非手动清除或代码删除；Cookie可以设置过期时间，可以在指定时间之前保持有效。
- 存储位置：sessionStorage、localStorage和Cookie数据都存储在客户端，不涉及服务器。
- 存储机制：sessionStorage、localStorage和Cookie都使用键值对的方式存储数据。
- 跨窗口通信：sessionStorage和localStorage不支持跨窗口通信，而Cookie支持。
- 跨域名访问：sessionStorage和localStorage不支持跨域名访问，而Cookie支持。
- 浏览器支持：sessionStorage和localStorage在现代浏览器中得到支持，而Cookie在所有浏览器中都可用。
- 与服务器交互：sessionStorage、localStorage不会自动发送数据到服务器，而Cookie在每次HTTP请求中都会自动发送到服务器。
| 特性 | sessionStorage | localStorage | cookie |
|---|
| 存储容量 | 5MB | 5MB | 4KB |
| 生命周期 | 单个会话期间 | 永久 | 可设置 |
| 存储位置 | 客户端 | 客户端 | 客户端 |
| 存储机制 | 键值对 | 键值对 | 键值对 |
| 跨窗口通信 | 不支持 | 不支持 | 支持 |
| 跨域名访问 | 不支持 | 不支持 | 支持 |
| 浏览器支持 | 现代浏览器 | 现代浏览器 | 所有浏览器 |
| 与服务器交互 | 不自动发送 | 不自动发送 | 自动发送 |
