LocalStorage和SessionStorage不工作React.js

LocalStorage和SessionStorage是HTML5提供的两种前端存储机制，用于在客户端保存数据。

1. LocalStorage:
   • 概念：LocalStorage是一种持久化的本地存储方式，数据存储在浏览器中，即使关闭浏览器也能保留数据。
   • 分类：属于Web Storage API的一部分，以键值对的形式存储数据。
   • 优势：
     • 容量大：通常可以存储5MB至20MB的数据，取决于浏览器。
     • 持久性：数据不会过期，除非用户手动删除或使用代码进行清除。
     • 客户端访问：数据存储在客户端，可以在不向服务器发送请求的情况下进行访问。
   • 应用场景：适用于需要持久化存储较大数据量的场景，如用户配置、离线缓存等。
   • 腾讯云相关产品：腾讯云无直接提供相关产品。

• SessionStorage:
  • 概念：SessionStorage是一种临时的本地存储方式，数据在用户会话期间有效，关闭浏览器会丢失数据。
  • 分类：属于Web Storage API的一部分，以键值对的形式存储数据。
  • 优势：
    • 数据隔离：每个浏览器标签页都有独立的SessionStorage，不同标签页之间的数据互不干扰。
    • 容量大：通常可以存储5MB至20MB的数据，取决于浏览器。
    • 安全性：数据仅在同一站点的页面间共享，不会被其他站点窃取。
  • 应用场景：适用于需要在同一会话期间共享数据的场景，如购物车、表单数据等。
  • 腾讯云相关产品：腾讯云无直接提供相关产品。

在React.js中，LocalStorage和SessionStorage的使用方式类似于原生JavaScript：

1. 通过LocalStorage存储数据：

localStorage.setItem('key', 'value'); // 存储数据
const data = localStorage.getItem('key'); // 获取数据
localStorage.removeItem('key'); // 删除数据
localStorage.clear(); // 清空所有数据

1. 通过SessionStorage存储数据：

sessionStorage.setItem('key', 'value'); // 存储数据
const data = sessionStorage.getItem('key'); // 获取数据
sessionStorage.removeItem('key'); // 删除数据
sessionStorage.clear(); // 清空所有数据

注意：在React.js中使用LocalStorage和SessionStorage时，需要确保在组件生命周期中的正确时机使用相应的存储方式。

相关链接：

• LocalStorage文档：https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
• SessionStorage文档：https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage