简述浏览器本地存储的方式及区别

一、为什么使用本地存储？

在前端开发中,我们常需要在本地持久化存储一些重要数据,比如用户标识 token,并在页面刷新或关闭后依然可以访问这些数据。这时就需要使用本地存储。

在JavaScript 中，提供了三种可用的本地存储方式：cookie、sessionStorage、localStorage。

二、Javascript本地存储位置

应用（控制台 Application 模块）

三、Javascript本地存储的方式

javaScript本地缓存的方法我们主要讲述以下四种：

cookie
sessionStorage
localStorage
indexedDB

Cookie 是存储在用户本地终端上用来标识用户身份的小文本文件。它的出现是为了解决 HTTP 协议无状态的问题,主要应用场景是保存用户登录状态等信息。

作为不超过 4KB 的文本数据,Cookie 由名称(Name)、值(Value)和控制失效时间、安全性、作用域等的可选属性组成。

但是 Cookie 在每次请求中都会被发送到服务器,如果不使用 HTTPS 加密,其内容很容易被窃取,导致安全风险。

例如一些网站使用 Cookie 保存登录状态,如果 Cookie 被盗用,攻击者可以冒充用户登录。

Cookie常用属性

Expires:设置Cookie失效时间
Max-Age:设置Cookie最大生存时间(秒),优先级高于Expires
Domain:指定Cookie所在域名
Path:设置Cookie路径
Secure:Cookie只能通过HTTPS协议发送

Cookie的使用

在客户端JavaScript中可以通过document.cookie访问和修改Cookie。

设置Cookie:

js 复制代码

document.cookie = 'username=John';

要修改Cookie,Domain和Path必须设置为已有Cookie相同的值,否则会创建新Cookie。

删除Cookie可将失效时间设置为过去的时间。

总结

Cookie的作用是标识用户身份、保存登录状态等,而不是为了存储数据。

Cookie内容可能被窃取,安全性不如新式的Web存储方式。现代Web应用中Cookie逐渐被localStorage等本地存储所取代。

localStorage

localStorage是HTML5新增的本地存储方式,可以将数据持久化存储在浏览器中。

特点

持久化存储,除非主动删除否则永不过期
同域页面间共享数据
本页面对其操作不会触发storage事件,其他页面会触发
存储空间大约为5M
存储内容多会占用内存,可能导致页面变卡
受同源策略限制

使用

js 复制代码

// 存储
localStorage.setItem('key', 'value');

// 读取  
let data = localStorage.getItem('key');

// 删除
localStorage.removeItem('key');

// 清空所有存储
localStorage.clear();

localStorage的主要缺点:

无法设置数据过期时间
只能直接存储字符串格式的数据

总结

localStorage适合在浏览器中保存量不大、对持久化需求高的数据,是前端存储的重要方式之一。

可能占用额外内存,使用时需要关注其对页面性能的影响。

sessionStorage

sessionStorage属于临时性存储,与localStorage的使用方法基本一致,主要区别在于sessionStorage的数据在浏览器页面或标签关闭后会被清除，而localStorage的数据会永久保存（直至手动删除）。

这是因为sessionStorage的生命周期仅存在于当前页面会话,一旦会话结束,其中保存的数据也会被删除。

存储上限

cookie数据不超过4KB
sessionStorage和localStorage虽也有存储上限,但比cookie大很多,可以达到5M或更大

有效期限

localStorage数据会永久存储,除非主动删除
sessionStorage数据在浏览器标签或窗口关闭后自动删除
cookie可以设置失效时间,在失效前一直有效,即使窗口或浏览器关闭

与服务器交互

cookie的数据会自动发送到服务器,服务器也可以写入cookie
sessionStorage和localStorage不参与和服务器的通信,仅本地保存

总结

Cookie、LocalStorage和SessionStorage是浏览器提供的三种主流本地存储方式,各有应用场景。

Cookie的主要作用是跟踪会话状态,窗口关闭后数据不消失,安全性较差,应慎重存储敏感数据。适合保存用户偏好设置、登录状态等少量非敏感数据。
LocalStorage提供永久性存储,页面和浏览器关闭后数据依然存在,应广泛应用于本地缓存非敏感数据以提高访问速度。同时需要关注占用内存问题。
SessionStorage临时存储数据,页面会话结束后被清除,可用于需保密数据的登录验证等场景。关闭窗口或标签页前数据可共享。