浏览器缓存 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));
浏览器缓存 JavaScript 操作相关推荐
- 360浏览器清除缓存_手机微信内置浏览器缓存清理指南
点击上方蓝字关注我们 手机微信内置浏览器缓存清理指南 各位老师,关于健康打卡系统有部分老师无法看到"每日测温"功能的问题,主要出现在用微信扫一扫打开系统时,这是由于微信内置浏览器的 ...
- 微信内置浏览器缓存清理
之前做过很多公众号的项目,项目写完后给客户看项目,客户一而再再而三的修改元素向左挪1px,向右挪2px.改好之后让客户看,客户说我特泽发克,你啥都没有修改,你竟然骗我!!! 这其实就是微信内置浏览器的 ...
- 如何清空微信浏览器缓存
微信其实内嵌了一个QQ浏览器,只是这个浏览器没有菜单界面,看上去无法清理微信内置浏览器的缓存.本经验就教大家如何清空微信浏览器缓存. 工具/原料 手机微信APP 方法一:debug页面清楚法 1 随便 ...
- javascript 操作日期 测试(注意浏览器兼容问题)
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...
- 【JavaScript】请求数据时,添加时间戳,避免浏览器缓存
浏览器具有缓存,不会请求相同的数据. 如果要写一个刷新验证码功能,可以请求数据时,添加时间戳,避免浏览器缓存,示例:
- ajax浏览器操作发生异常,解决IE浏览器缓存导致AJAX请求数据异常
IE10浏览器会把AJAX请求的数据都缓存下来,然后每次想去刷新数据时发现数据都是一样的,于是导致数据显示异常. 解决方法: 在页面 标签里,加上以下声明: 保存后,刷新页面,重新访问即可. 说明:最 ...
- JavaScript 清除浏览器缓存的几种方法
关于浏览器缓存 浏览器缓存,有时候我们需要他,因为他可以提高网站性能和浏览器速度,提高网站性能.但是有时候我们又不得不清除缓存,因为缓存可能误事,出现一些错误的数据.像股票类网站实时更新等,这样的网站 ...
- 第20天 javascript浏览器缓存机制
缓存可以说是性能优化中简单⾼效的⼀种优化⽅式了,它可以显著减少⽹络传输所带来的 损耗. 对于⼀个数据请求来说,可以分为发起⽹络请求.后端处理.浏览器响应三个步骤.浏览器缓存可以帮助我们在第⼀和第三步骤 ...
- JavaScript基础之缓存机制:浏览器缓存机制
缓存可以说是网站性能优化非常有用的一种方式.一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷. 对于一个数据请求来说,可以分为发起网络 ...
最新文章
- WPF 3D:使用GeometryModel3D的BackMaterial
- xshell 设置屏幕字体
- Spring系列教程八: Spring实现事务的两种方式
- 零基础玩视频号?创作运营变现,你要的干货都在这了!
- 【ArcGIS遇上Python】Python实现Modis NDVI批量化月最大合成
- lora发射和接收原理_LoRa 的扩频技术
- Android 异步任务
- 微信小程序开发:学习笔记[5]——JavaScript脚本
- kernel32.dll动态链接库报错解决方法win7,怎么修复kernel32.dll文件缺失
- DirectX修复工具
- GitHub Top 100的Android开源库
- C语言中的.h文件的作用
- 思岚SLAMTEC A1开箱测试(实现雷达数据的查看+hector_slam建图)
- mysql 误删表 恢复数据_MySQL误删数据或者误清空表恢复
- JAVA个版本新特性
- php date 加月_php如何使时间增加一个月
- 亚马逊联手AI初创公司开发ChatGPT竞品;百度公布2022年财报;高通推出付费云软件服务丨每日大事件...
- sql存储过程完全教程
- 关闭Eslint中的规则 no-unused-vars
- 保密计算机三员分立 配置,涉密应用系统 “三员” 管理的配置方法