JavaScript本地化存储

1. 什么是JavaScript本地化存储

• JavaScript的本地化存储是一种在用户浏览器端存储数据的机制。它允许网页应用在用户的浏览器中保存数据，这样即使在浏览器关闭后，数据依然可以被保留，并且在下次访问相同网页应用时能够被读取和使用。这种存储方式对于提升用户体验非常有帮助，例如可以记住用户的登录状态、偏好设置等信息。
  

2. 主要的本地化存储方式

• Cookie
  • 概念：Cookie是最古老的浏览器存储方式。它是一小段文本信息，由服务器发送给浏览器，浏览器会在后续的请求中将Cookie信息发送回服务器。
  • 特点：
    • 大小有限制，一般不超过4KB。
    • 每次请求都会自动携带Cookie信息，这会增加网络开销。
    • 可以设置过期时间，过期后浏览器会自动删除Cookie。
    • 安全性较低，因为数据以明文形式存储在浏览器中。
    • 例如，当用户登录一个网站后，服务器可以通过设置一个包含用户登录凭证（如用户ID和加密后的密码）的Cookie，使得用户在一定时间内访问该网站的其他页面时无需重新登录。
• LocalStorage
  • 概念：LocalStorage是HTML5引入的一种新的存储机制。它提供了一种在浏览器中存储键值对的方式，数据存储在用户的本地硬盘上（通过浏览器），并且不会在每次请求时发送给服务器。
  • 特点：
    • 存储容量相对较大，一般浏览器允许每个域名下存储5 - 10MB的数据。
    • 数据存储是持久化的，除非通过JavaScript代码或者用户手动清除浏览器缓存，否则数据会一直存在。
    • 只能存储字符串类型的数据。如果要存储其他类型的数据（如对象、数组），需要先将其转换为字符串（可以使用JSON.stringify方法），读取时再转换回来（使用JSON.parse方法）。
    • 例如，一个在线文档编辑网站可以使用LocalStorage来存储用户的文档内容，这样用户下次打开网页时可以继续编辑之前的文档。
• SessionStorage
  • 概念：SessionStorage也是HTML5提供的存储机制，和LocalStorage类似，但它的数据只在当前会话（浏览器标签或窗口的一次打开和关闭期间）有效。
  • 特点：
    • 存储容量和LocalStorage差不多。
    • 当浏览器标签或窗口关闭时，存储的数据会被自动清除。
    • 同样只能存储字符串类型的数据，也需要进行数据类型转换。
    • 例如，在一个购物网站的结账流程中，可以使用SessionStorage来存储用户在当前结账会话中选择的商品信息，一旦用户完成结账或者关闭结账页面，这些数据就不再需要保存。

3. 如何使用LocalStorage和SessionStorage

• 存储数据
  • 以LocalStorage为例，使用localStorage.setItem('key', 'value')来存储数据，其中key是键，value是要存储的值。例如localStorage.setItem('username', 'John')，就是将用户名John存储到LocalStorage中，键为username。
• 读取数据
  • 可以使用localStorage.getItem('key')来读取数据。例如const username = localStorage.getItem('username')，这样就可以获取之前存储的用户名。
• 删除数据
  • 使用localStorage.removeItem('key')来删除指定键的数据。如果要清空所有存储的数据，可以使用localStorage.clear()。

4. 应用场景

• 用户偏好设置：如网页的字体大小、主题颜色等偏好设置可以存储在LocalStorage中，用户下次访问网页时，应用可以读取这些设置并应用。
• 购物车功能：对于电商网站，SessionStorage可以用于临时存储用户购物车中的商品信息，在用户完成购物或者关闭页面后可以清除这些信息。
• 用户历史记录：新闻网站或视频网站可以使用LocalStorage来存储用户浏览过的文章或视频记录，方便用户查看历史记录。