找回密码
 会员注册
查看: 27|回复: 0

一文读懂浏览器本地存储:WebStorage

[复制链接]

2万

主题

0

回帖

6万

积分

超级版主

积分
64021
发表于 2024-9-19 18:41:00 | 显示全部楼层 |阅读模式
一、简介二、localStorage和sessionStorage2.1、区别2.2、浏览器兼容性三、使用说明3.1、API介绍3.2、浏览器查看3.3、监听四、存储4.1、存储容量4.2、存储性能五、应用5.1、使用习惯记录5.2、首次打开提示5.3、减少重复访问接口六、总结一、简介浏览器本地存储是指浏览器提供的一种机制,允许Web应用程序在浏览器端存储数据,以便在用户下次访问时可以快速获取和使用这些数据。一共两种存储方式:localStorage和sessionStorage。下面介绍下两种缓存的特性和在内部平台的一些应用。二、localStorage和sessionStorage2.1、区别localStorage和sessionStorage的主要区别是生命周期,具体区别如下:localStoragesessionStorage生命周期持久化存储:除非自行删除或清除缓存,否则一直存在会话级别的存储:浏览器标签页或窗口关闭作用域相同浏览器,同域名,不同标签,不同窗口相同浏览器,同域名,同源窗口获取方式window.localStoragewindow.sessionStorage存储容量5M5M容量限制的目的是防止滥用本地存储空间,导致用户浏览器变慢。2.2、浏览器兼容性1)现在的浏览器基本上都是支持这两种Storage特性的。各浏览器支持版本如下:ChromeFirefoxIEOperaSafariAndroidOperaMobileSafariMobilelocalStorage43.5810.542.111iOS3.2sessionStorage52810.542.111iOS3.22)如果使用的是老式浏览器,比如InternetExplorer6、7或者其他,就需要在使用前检测浏览器是否支持本地存储或者是否被禁用。以localStorage为例:if(window.localStorage){  alert("浏览器支持 localStorage");} else {  alert("浏览器不支持 localStorage");}3)某些浏览器版本使用过程中,会出现Storage不能正常使用的情况,记得添加try/catch。以localStorage为例:if(window.localStorage){  try {    localStorage.setItem("username", "name");    alert("浏览器支持 localStorage");  } catch (e) {    alert("浏览器支持 localStorage 后不可使用");  }} else {  alert("浏览器不支持 localStorage");}三、使用说明3.1、API介绍localStorage和sessionStorage提供了相同的方法进行存储、检索和删除。常用的方法如下:设置数据:setItem(key,value)存储的值可以是字符串、数字、布尔、数组和对象。对象和数组必须转换为string进行存储。JSON.parse()和JSON.stringify()方法可以将数组、对象等值类型转换为字符串类型,从而存储到Storage中;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));eg:数据没有序列化,导致保存的数据异常获取数据:getItem(key)如果key对应的value获取不到,则返回值是null;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"));删除数据:removeItem(key);localStorage.removeItem("username");sessionStorage.removeItem("username");清空数据:clear();localStorage.clear();sessionStorage.clear();在不确定是否存在key的情况下,可以使用hasOwnProperty()进行检查;localStorage.hasOwnProperty("userName"); // truesessionStorage.hasOwnProperty("userName"); // false当然,也可以使用Object.keys()查看所有存储数据的键;Object.keys(localStorage); // ['username']Object.keys(sessionStorage);3.2、浏览器查看本地存储的内容可以在浏览器中直接查看,以Chrome为例,按住键盘F12进入开发者工具后,选择Application,然后就能在左边Storage列表中找到localStorage和sessionStorgae。3.3、监听当存储的数据发生变化时,其他页面通过监听storage事件,来获取变更前后的值,以及根据值的变化来处理页面的展示逻辑。JS原生监听事件,只能够监听同源非同一个页面中的storage事件,如果想监听同一个页面的,需要改写原生方法,抛出自定义事件来监听。具体如下:监听同源非同一个页面直接在其他页面添加监听事件即可。eg:同域下的A、B两个页面,A修改了localStorage,B页面可以监听到storage事件。window.addEventListener("storage", () => {  // 监听 username 值变化  if (e.key === "username") {    console.log("username 旧值:" + e.oldValue + ",新值:" + e.newValue);  }})注:当两次setItem更新的值一样时,监听方法是不会触发的;storage事件只能监听到localStorage的变化。监听同一个页面重写Storage的setItem事件,同理,也可以监听删除事件removeItem和获取事件getItem。(() => {  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);  }});四、存储浏览器默认能够存储5M的数据,但实际上,浏览器并不会为其分配特定的存储空间,而是根据当前浏览器的空闲空间来判断能够分配多少存储空间。4.1、存储容量可以使用Storage的length属性,对存储容量进行测算,以localStorage为例:let str = "0123456789";let temp = "";// 先生成一个 10KB 的字符串while (str.length !== 10240) {  str = str + "0123456789";}// 清空localStorage.clear();// 计算总量const computedTotal = () => {  return new romise((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  过期时间  if(new Date().getTime() - valueJson.time > exp){    console.log("expires"); //提示过期  } else {    console.log("value:" + valueJson.value);  }}五、应用5.1、使用习惯记录用来缓存一些筛选项数据,保存用户习惯信息,起到避免多次重复操作的作用。eg:在beetle工程列表中,展示了自已权限下所有beetle的项目,对于参与项目多和参与项目少的人,操作习惯是不同的,由此,记录收藏功能状态解决了这一问题,让筛选项记住用户选择,方便下次使用。在开发使用中,直接获取localStorage.getItem('isFavor')作为默认值展示,切换后使用localStorage.setItem()方法更新保存内容。// 获取const isFavor = localStorage.getItem('isFavor');this.state = {  isFavor: isFavor !== null ? Number(isFavor) : EngineeringTypeEnum.FAVOR,};// 展示默认值   this.changeFavor(e)}    {...searchSmallFormProps}  >      {EngineeringTypeEnum.property.map(e => ({e.name}))}  // 变更changeFavor = (e) => {  localStorage.setItem('isFavor', e);  this.setState({ isFavor: e });};5.2、首次打开提示用来缓存用户导览,尤其是只需要出现一次的操作说明弹窗等。eg:当第一次或者清空缓存后登录,页面需要出现操作指南和用户手册的弹窗说明。在开发使用中,注意存储的数据类型为string,转成布尔值是为了在插件中方便控制弹窗的显示隐藏。// 获取const operationVisible = localStorage.getItem('operationVisible');this.state = {  operationVisible: operationVisible === null || operationVisible === 'true' ? true : false,};// 控制展示 {     this.setState({ operationVisible: false });     localStorage.setItem('operationVisible', false);   }}  footer={null}  destroyOnClose={true}>  动作   接口 》 用例 》 用例集,3级结构满足不了后续的使用,因此增加【动作】这一层级,【动作】是接口测试的最小单元,多个【动作】可以组合成一个用例,多个用例可以聚合为用例集;  5.3、减少重复访问接口在浏览页面时,会遇到一些经常访问但返回数据不更新的接口,这种特别适合用做页面缓存,只在页面打开的时候访问一次,其他时间获取缓存数据即可。eg:在我们的一些内部系统中,用户信息是每个页面都要用到的,尤其是userId字段,会与每个获取数据接口挂钩,但这个数据是不会变的,一直请求是没有意义的,为减少接口的访问次数,可以将主要数据缓存在localStorage内,方便其他接口获取。六、总结希望通过此篇文章,可以让大家了解WebStorage在浏览器数据存储和读取的相关操作,以及相关事件和限制。它可以用于保存用户的偏好设置、表单数据等,在开发中使用可以方便的存储和读取数据,提高用户体验。当然,在使用时需要特别注意它的限制,以及在存储、读取和删除数据过程中的错误处理。关于作者刘筱雨,转转工程效率组内成员,主要负责公司内部公共系统前端项目。想了解更多转转公司的业务实践,点击关注下方的公众号吧!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

QQ|手机版|心飞设计-版权所有:微度网络信息技术服务中心 ( 鲁ICP备17032091号-12 )|网站地图

GMT+8, 2024-12-26 00:55 , Processed in 0.735587 second(s), 25 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表