本文由转转技术团队刘筱雨分享,原题“一文读懂浏览器本地存储:Web Storage”,即时通讯网进行了排版和内容优化。
if(window.localStorage){ alert("浏览器支持 localStorage"); } else { alert("浏览器不支持 localStorage"); }
if(window.localStorage){ try { localStorage.setItem("username", "name"); alert("浏览器支持 localStorage"); } catch (e) { alert("浏览器支持 localStorage 后不可使用"); } } else { alert("浏览器不支持 localStorage"); }
localStorage.setItem("username", "name"); // "name" localStorage.setItem("count", 1); // "1" localStorage.setItem("isOnline", true); // "true" sessionStorage.setItem("username", "name"); // user 存储时,先使用 JSON 序列化,否则保存的是[object Object] const user = { "username": "name" }; localStorage.setItem("user", JSON.stringify(user)); sessionStorage.setItem("user", JSON.stringify(user));
const usernameLocal = localStorage.getItem("username"); const usernameSession = sessionStorage.getItem("username"); // 获取到的数据为string,使用时反序列化数据 const userLocal = JSON.parse(localStorage.getItem("user")); const userSession = JSON.parse(sessionStorage.getItem("user"));
localStorage.removeItem("username"); sessionStorage.removeItem("username");
localStorage.clear(); sessionStorage.clear();
localStorage.hasOwnProperty("userName"); // true sessionStorage.hasOwnProperty("userName"); // false
Object.keys(localStorage); // ['username'] Object.keys(sessionStorage);
window.addEventListener("storage", () => { // 监听 username 值变化 if (e.key === "username") { console.log("username 旧值:" + e.oldValue + ",新值:" + e.newValue); } })
(() => { const originalSetItem = localStorage.setItem; // 重写 setItem 函数 localStorage.setItem = function (key, val) { let event = new Event("setItemEvent"); event.key = key; event.newValue = val; window.dispatchEvent(event); originalSetItem.apply(this, arguments); }; })(); window.addEventListener("setItemEvent", function (e) { // 监听 username 值变化 if (e.key === "username") { const oldValue = localStorage.getItem(e.key); console.log("username 旧值:" + oldValue + ",新值:" + e.newValue); } });
let str = "0123456789"; let temp = ""; // 先生成一个 10KB 的字符串 while (str.length !== 10240) { str = str + "0123456789"; } // 清空 localStorage.clear(); // 计算总量 const computedTotal = () => { return new Promise((resolve) => { // 往 localStorage 中累积存储 10KB const timer = setInterval(() => { try { localStorage.setItem("temp", temp); } catch (e) { // 报错说明超出最大存储 resolve(temp.length / 1024); clearInterval(timer); // 统计完记得清空 localStorage.clear(); } temp += str; }, 0); }); }; // 计算使用量 const computedUse = () => { let cache = 0; for (let key in localStorage) { if (localStorage.hasOwnProperty(key)) { cache += localStorage.getItem(key).length; } } return (cache / 1024).toFixed(2); }; (async () => { const total = await computedTotal(); let use = "0123456789"; for (let i = 0; i < 1000; i++) { use += "0123456789"; } localStorage.setItem("use", use); const useCache = computedUse(); console.log(`最大容量${total}KB`); console.log(`已用${useCache}KB`); console.log(`剩余可用容量${total - useCache}KB`); })();
const LZString = require("lz-string"); const data = "This is a test message"; // 压缩 const compressedData = LZString.compress(data); localStorage.setItem("test", compressedData); // 解压 const decompressedData = LZString.decompress(localStorage.getItem("test"));
for (const key in userInfo) { localStorage.setItem(key, userInfo[key]); }
for (const key in userInfo) { if (["userName", "legalEntityName", "isOnline"].includes(key)) { localStorage.setItem(key, userInfo[key]); } }
// 设置 function set(key, value){ const time = new Date().getTime(); //获取当前时间 localStorage.setItem(key, JSON.stringify({value, time})); //转换成json字符串 } // 获取 function get(key, exp){ // exp 过期时间 const value = localStorage.getItem(key); const valueJson = JSON.parse(value); //当前时间 - 存储的创建时间 > 过期时间 if(new Date().getTime() - valueJson.time > exp){ console.log("expires"); //提示过期 } else { console.log("value:" + valueJson.value); } }
// 获取 const isFavor = localStorage.getItem('isFavor'); this.state = { isFavor: isFavor !== null ? Number(isFavor) : EngineeringTypeEnum.FAVOR, }; // 展示默认值 <Form.Item name='isFavor' initialValue={this.state.isFavor}> <Select placeholder='筛选收藏的工程' onChange={(e) => this.changeFavor(e)} {...searchSmallFormProps} > {EngineeringTypeEnum.property.map(e => (<Option key={e.id} value={e.id}>{e.name}</Option>))} </Select> </Form.Item> // 变更 changeFavor = (e) => { localStorage.setItem('isFavor', e); this.setState({ isFavor: e }); };
// 获取 const operationVisible = localStorage.getItem('operationVisible'); this.state = { operationVisible: operationVisible === null || operationVisible === 'true' ? true : false, }; // 控制展示 <Modal title='操作指南' open={this.state.operationVisible} onCancel={() => { this.setState({ operationVisible: false }); localStorage.setItem('operationVisible', false); }} footer={null} destroyOnClose={true} > <Divider orientation='left'>动作</Divider> <p>接口 》 用例 》 用例集,3级结构满足不了后续的使用,因此增加【动作】这一层级,【动作】是接口测试的最小单元,多个【动作】可以组合成一个用例,多个用例可以聚合为用例集;</p> <Image src={OperationGuidePng} preview={false} /> </Modal>
来源:即时通讯网 - 即时通讯开发者社区!
轻量级开源移动端即时通讯框架。
快速入门 / 性能 / 指南 / 提问
轻量级Web端即时通讯框架。
详细介绍 / 精编源码 / 手册教程
移动端实时音视频框架。
详细介绍 / 性能测试 / 安装体验
基于MobileIMSDK的移动IM系统。
详细介绍 / 产品截图 / 安装体验
一套产品级Web端IM系统。
详细介绍 / 产品截图 / 演示视频
精华主题数超过100个。
连续任职达2年以上的合格正式版主
为论区做出突出贡献的开发者、版主等。
Copyright © 2014-2024 即时通讯网 - 即时通讯开发者社区 / 版本 V4.4
苏州网际时代信息科技有限公司 (苏ICP备16005070号-1)
Processed in 0.127934 second(s), 44 queries , Gzip On.