本地存储、会话存储和 Cookie 之间的区别

在传统的 Web 应用程序中，将客户端与服务器之间的数据传递都是通过 Cookie 完成的。但是这种方式存在一些限制，例如数据传输速度慢、最大可传输的数据量有限制等。因此，现代的 Web 应用程序使用了一些更为高效的本地存储技术，例如本地存储、会话存储和 Cookie 等。

1. Cookie

Cookie 是一种在浏览器端存储数据的方式，它可以存储有限的数据，并且只能存储字符串类型的数据。

Cookie 除了数据量有限之外，还存在一些其他的限制，例如：

• Cookie 的过期时间是固定的，无法动态更改；
• Cookie 的有效作用域是域名级别，例如 www.example.com 和 example.com 是不同的域名，它们之间的 Cookie 是不能共享的；
• Cookie 每次 HTTP 请求都会携带在 Header 中，会占用带宽资源。

2. 本地存储

本地存储，即利用浏览器在客户端将数据存储在磁盘上的技术。在本地存储中，常用的有两种存储方式：localStorage 和 sessionStorage。

2.1 localStorage

localStorage 可以无限制地存储数据，可以存储任何类型的数据（包括字符串、数值、布尔值、对象等），并且不会随着浏览器关闭而消失。

// 存储数据
localStorage.setItem('key', 'value');

// 获取数据
localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

2.2 sessionStorage

相比之下，sessionStorage 只能存储 session 期间相关的数据，即当浏览器关闭时，存储在 sessionStorage 中的数据就会消失。

// 存储数据
sessionStorage.setItem('key', 'value');

// 获取数据
sessionStorage.getItem('key');

// 删除数据
sessionStorage.removeItem('key');

3. 会话存储

会话存储是一种相对于本地存储、Cookie 更加轻量的存储方式。在会话存储中，数据会存储在内存中，当浏览器关闭时，存储在会话存储中的数据就会被清除。

在 JavaScript 中，会话存储可以通过 window.sessionStorage 对象来实现，它的用法和 localStorage / sessionStorage 是相似的。

// 存储数据
window.sessionStorage.setItem('key', 'value');

// 获取数据
window.sessionStorage.getItem('key');

// 删除数据
window.sessionStorage.removeItem('key');

总结

| 存储方式 | 数据量限制 | 存储时间 | 数据类型 | 数据共享 | | ------ | ---- | ---- | ------ | ------ | | Cookie | 4KB | 固定 | 字符串 | 同一域名 | | 本地存储 | 无限制 | 持久化 / 会话 | 任意类型 | 同一域名 | | 会话存储 | 无限制 | 会话 | 任意类型 | 无法共享 |

在实际开发中，可以根据不同的需求选择不同的存储方式，以更好地实现数据存储与共享的功能。