浏览器缓存 JavaScript 操作

本文同步发布于 https://molmin.github.io/blog/article?id=8438923900934a8515d616227fe51093。

打开开发者工具窗口，可以看到如下界面：

这些数据就是浏览器这个页面的缓存数据。

JavaScript 调用浏览器缓存可以使用 window.localStorage 和 window.sessionStorage，也可以简记为 localStorage 和 sessionStorage。

window.localStorage 和 window.sessionStorage 的区别： localStorage 可以永久保存这些缓存数据（直到被删除），而 sessionStorage 只会保存该窗口产生的数据，关闭窗口后数据将删除（同一窗口内不同标签页的 sessionStorage 数据是公用的）。

浏览器兼容性

各大浏览器首个支持 localStorage 的版本见下表。

基础操作

1. 检测浏览器是否支持

if(!window.localStorage)
    message("浏览器不支持 Localstorage");

2. 设定键值对

使用函数 setItem 便可以设置键值对的值。关于缓存存储 Json 数据的方法，请见本文 注释。

window.localStorage.setItem('key','val');

也可以使用如下语句：

window.localStorage.key='val';

**Tips: **使用类似文章顶部的图片的方法可以更直观地看到缓存数据，建议初学者测试时联合之。

3. 读取键值对

使用函数 getItem 便可以读取键值对的值。关于缓存存储 Json 数据的方法，请见本文 注释。

console.log(window.localStorage.getItem('key'));

也可以使用如下语句：

console.log(window.localStorage.key);

4. 删除键值对

使用函数 removeItem 便可以删除键值对数据。

window.localStorage.removeItem('key');

5. 清空缓存数据

使用函数 clear 可以直接删除所有数据。

window.localStorage.clear();

6. 更改监听事件

这将使得数据发生更改时所有该页面标签页均会触发事件。

window.addEventListener('storage', () => {
    ...
});
 
window.onstorage = () => {
    ...
};

优势与劣势

【内存限制大】 cookie 内存上限为 4 KiB，而 localStorage 可以做到 5 MiB。

【本地存储】 浏览器缓存可以将一次请求的数据直接存储到本地，相当于一个 5 MiB 的前端数据库，相比于 cookie 可以节约带宽。

【版本局限性】 浏览器的版本可能会影响缓存的使用。

【类型局限性】 目前主流浏览器的缓存键值对属性均只支持字符串。

缓存应用

可作为前端数据库

将一次请求的数据直接存储到本地，相当于一个 5 MiB 的前端数据库，相比于 cookie 可以节约带宽。

可作为前端主题设置存储

常见的例如前端亮暗色切换。

可作为游戏账号存储

例如众多 io 游戏都使用缓存存储账号。

如 florr.io，其存储的缓存键值对 cp6_player_id 的内容即为账号 id，保存之即可转移账号至其他设备。

例如该语句可以导出账号导入语句：

console.log('window.localStorage.setItem("cp6_player_id","'+window.localStorage.getItem("cp6_player_id")+'");');

又如下面的两个账号（已经失效）：

window.localStorage.setItem("cp6_player_id","f04b9031-2760-49fd-be28-4dfdcff7bc20"); // Chess Nut's Florr cp6_player_id
window.localStorage.setItem("cp6_player_id","51acef81-e03b-41c6-900d-5765217dfefb"); // No Xuxu LQYc's Florr cp6_player_id

注释

缓存只能存储字符串，不能直接存储 Json 数据。但是可以使用函数 JSON.stringify 将 Json 转换为字符串。例如

window.localStorage.key=JSON.stringify({a:"abc",b:1,c:false});

而使用 JSON.parse 函数可以将字符串转换回 Json。例如

console.log(JSON.parse(window.localStorage.key));