Web 本地存储

内容列表

为了达到某些需求,我们通常需要在本地存储一些数据,方便我们进行用户个性化定制服务。

Web 存储

在互联网上,许多网站提供用户注册功能,因为 http 协议是个无状态的协议(无法记录客户端与服务器端状态),所以我们注册登录后每一次跳转网页都需要重新登陆。为了增强用户体验,我们不得不将状态信息保存下来,而 Web 存储技术则实现了该需求。Cookie 最多可在本地存储 4K 数据,出于安全性考虑, Cookie 中并非直接存储的是用户敏感数据(帐号、密码、个人信息等),而是一个状态 ID,该 ID 是服务器端利用 session 存储一个会话状态并分配给客户端用来进行状态识别的。因此,每一次的 http 请求都会带上 Cookie 数据发送给服务器端进行状态识别,从而达到状态保持的目的。

HTML5 Web 本地存储

在以前,我们是通过 Cookie 来实现 Web 本地存储的。不过,HTML5 为我们带来了新的 Web 本地存储功能,即 localStoragesessionStorage,下面我们来简单的分析一下它们各自的特点。

Cookie 相对来说用的时间很长了,技术更加成熟,尤其是这么多年以来在 Web 安全方面也有了很大的进步,在敏感信息存储方面 Cookie 的优势是明显的。而且,Cookie 在同源窗口中是共享的,同时也可以限制在某个路径下;它的有效期也是可以设置的,没有到达有效期前即使关闭浏览器窗口依然是有效的。

相反的,Cookie 的缺点也是明显的,最多只能存储约 4K 大小的数据;而且每次都会伴随同源 http 请求发送给服务器端,很浪费带宽。

localStorage

localStorage 存储的数据量要大得多,大约 5M 左右;它在同源窗口中也是共享的。而且,localStorage 存储数据的时间甚至长达数年(不主动删除,即使浏览器关闭也存在),所以说在开发过程中我们可以使用它来存储更多的数据,并更持久的存储。

sessionStorage

sessionStorage 存储的数据量也要大得多,但它是不能在同源窗口中共享的,也就是说它只允许在同窗口同页面中访问。而且,sessionStorage 存储的数据会在浏览器窗口关闭的时候自动删除,不能实现持久的保存数据。

注意:sessionStorage 在不同的标签页之间无法共享。

结语

就目前来看,HTML5 提供的新的 Web 本地存储方法适合存储一些非敏感数据,对于用户敏感的数据还是依靠 Cookie 来存储更安全一些。而 Web 本地存储是没有绝对安全的,依然面临很严峻的考验。

相关

为什么说useSignal()是Web框架的未来

2024-11-11

Angular、Qwik的作者 MIŠKO HEVERY 在文章中盛赞了 useSignal() 这种数据流方案, 表示 useSignal() 是前端框架的未来,并考虑在Angular中实现它。我们在这里不评价文章的观点,我们来看看 useSignal 这个方案的前世今生。

了解更多

Web 字体加载对 DOM 位置的影响

2022-10-16

由于使用了第三方 Web 字体,产生了一个潜在的线上问题,苦于调试过程中一直没有考虑字体加载会对 DOM 位置产生影响,浪费了大量时间和精力。

了解更多