本文同步发布于 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_idwindow.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));