Web Storage API的介绍和使用

最新推荐文章于 2025-04-29 02:45:00 发布

Java架构师课代表

最新推荐文章于 2025-04-29 02:45:00 发布

阅读量420

点赞数

CC 4.0 BY-SA版权

分类专栏： java js Javascript 文章标签： java javascript js vue python

本文链接：https://blog.csdn.net/bieber007/article/details/108940098

本文介绍了Web Storage API，包括sessionStorage和localStorage的使用，浏览器兼容性，隐身模式下的处理，以及如何监听Storage事件。Web Storage提供比cookie更高效的数据存储，并在现代浏览器中广泛支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

Web Storage为浏览器提供了方便的key value存储，是一种比cookie更加方便简洁的存储方式。也是诸多客户端存储方式中非常常见的一种。

一起来看看吧。

浏览器的本地存储技术

除了最早的使用cookie来进行本地存储之外，现代浏览器使用Web Storage API来方便的进行key/value的存储。

Web Storage有两种存储方式：

sessionStorage: 对于每一个访问源，都会维持一个独立的存储区域。只要浏览器不关闭，这些数据都不会消失。

所以这种存储叫做session存储。

注意，这里的session和服务器端的session的意思是不一样的，这里的sessionStorage只是本地的存储，并不会将数据传输到服务器端。

sessionStorage的存储容量要比cookie大得多，可以达到5MB。

localStorage：和sessionStorage类似，也是用来做数据存储的，不同的是localStorage存储的数据不会随着浏览器的关闭而消失。

我可以通过设置过期时间，使用javascript手动删除或者清楚浏览器缓存来清除localStorage。

这两种存储方式是通过Window.sessionStorage 和 Window.localStorage来使用的。事实上我们看下Window的定义：

interface Window extends EventTarget, AnimationFrameProvider, GlobalEventHandlers, WindowEventHandlers, WindowLocalStorage, WindowOrWorkerGlobalScope, WindowSessionStorage 
复制代码

Window继承了WindowLocalStorage和WindowSessionStorage，所以我们可以直接从Window来获取sessionSt

最低0.47元/天解锁文章

新学期VIP享超值加赠