一、为什么使用本地存储？
在前端开发中,我们常需要在本地持久化存储一些重要数据,比如用户标识 token,并在页面刷新或关闭后依然可以访问这些数据。这时就需要使用本地存储。
在JavaScript 中，提供了三种可用的本地存储方式：cookie、sessionStorage、localStorage。
二、Javascript本地存储位置
应用（ 控制台 Application 模块 ）
三、Javascript本地存储的方式
javaScript本地缓存的方法我们主要讲述以下四种：
- cookie
- sessionStorage
- localStorage
- indexedDB
Cookie
Cookie 是存储在用户本地终端上用来标识用户身份的小文本文件。它的出现是为了解决 HTTP 协议无状态的问题,主要应用场景是保存用户登录状态等信息。
作为不超过 4KB 的文本数据,Cookie 由名称(Name)、值(Value)和控制失效时间、安全性、作用域等的可选属性组成。
但是 Cookie 在每次请求中都会被发送到服务器,如果不使用 HTTPS 加密,其内容很容易被窃取,导致安全风险。
例如一些网站使用 Cookie 保存登录状态,如果 Cookie 被盗用,攻击者可以冒充用户登录。
Cookie常用属性
Expires:设置Cookie失效时间Max-Age:设置Cookie最大生存时间(秒),优先级高于ExpiresDomain:指定Cookie所在域名Path:设置Cookie路径Secure:Cookie只能通过HTTPS协议发送
Cookie的使用
在客户端JavaScript中可以通过document.cookie访问和修改Cookie。
设置Cookie:
document.cookie = 'username=John';
要修改Cookie,Domain和Path必须设置为已有Cookie相同的值,否则会创建新Cookie。
删除Cookie可将失效时间设置为过去的时间。
总结
Cookie的作用是标识用户身份、保存登录状态等,而不是为了存储数据。
Cookie内容可能被窃取,安全性不如新式的Web存储方式。现代Web应用中Cookie逐渐被localStorage等本地存储所取代。
localStorage
localStorage是HTML5新增的本地存储方式,可以将数据持久化存储在浏览器中。
特点
- 持久化存储,除非主动删除否则永不过期
- 同域页面间共享数据
- 本页面对其操作不会触发storage事件,其他页面会触发
- 存储空间大约为5M
- 存储内容多会占用内存,可能导致页面变卡
- 受同源策略限制
使用
// 存储
localStorage.setItem('key', 'value');
// 读取
let data = localStorage.getItem('key');
// 删除
localStorage.removeItem('key');
// 清空所有存储
localStorage.clear();
localStorage的主要缺点:
- 无法设置数据过期时间
- 只能直接存储字符串格式的数据
总结
localStorage适合在浏览器中保存量不大、对持久化需求高的数据,是前端存储的重要方式之一。
可能占用额外内存,使用时需要关注其对页面性能的影响。
sessionStorage
sessionStorage属于临时性存储,与localStorage的使用方法基本一致,主要区别在于sessionStorage的数据在浏览器页面或标签关闭后会被清除，而localStorage的数据会永久保存（直至手动删除）。
这是因为sessionStorage的生命周期仅存在于当前页面会话,一旦会话结束,其中保存的数据也会被删除。
cookie、sessionStorage和localStorage的区别
存储上限
cookie数据不超过4KBsessionStorage和localStorage虽也有存储上限,但比cookie大很多,可以达到5M或更大
有效期限
localStorage数据会永久存储,除非主动删除sessionStorage数据在浏览器标签或窗口关闭后自动删除cookie可以设置失效时间,在失效前一直有效,即使窗口或浏览器关闭
与服务器交互
cookie的数据会自动发送到服务器,服务器也可以写入cookiesessionStorage和localStorage不参与和服务器的通信,仅本地保存
总结
Cookie、LocalStorage和SessionStorage是浏览器提供的三种主流本地存储方式,各有应用场景。
Cookie的主要作用是跟踪会话状态,窗口关闭后数据不消失,安全性较差,应慎重存储敏感数据。适合保存用户偏好设置、登录状态等少量非敏感数据。LocalStorage提供永久性存储,页面和浏览器关闭后数据依然存在,应广泛应用于本地缓存非敏感数据以提高访问速度。同时需要关注占用内存问题。SessionStorage临时存储数据,页面会话结束后被清除,可用于需保密数据的登录验证等场景。关闭窗口或标签页前数据可共享。
