【React】存储全局数据

最新推荐文章于 2025-10-21 08:00:35 发布

原创最新推荐文章于 2025-10-21 08:00:35 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了WebStorage的概念及其两种实现方式：localStorage和sessionStorage。localStorage用于持久化存储数据，而sessionStorage则只在当前会话期间有效。两者都提供相同的API进行数据的存取操作。

参考链接：https://segmentfault.com/a/1190000012057010?utm_source=tag-newest

webstorage

webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage。

localStorage

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

sessionStorage

sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。源生接口可以接受，亦可再次封装来对Object和Array有更好的支持。

ocalStorage和sessionStorage使用时使用相同的API：

 localStorage.setItem("key","value");//以“key”为名称存储一个值“value”

 localStorage.getItem("key");//获取名称为“key”的值

 localStorage.removeItem("key");//删除名称为“key”的信息。

 localStorage.clear();//清空localStorage中所有信息

存储：

localStorage.setItem('name','jack');

localStorage.setItem('user',JSON.stringify(user));

获取：

localStorage.getItem('name');

weekArray = JSON.parse(localStorage.getItem('user'));