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

见贤思齐

一、简介二、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在浏览器数据存储和读取的相关操作，以及相关事件和限制。它可以用于保存用户的偏好设置、表单数据等，在开发中使用可以方便的存储和读取数据，提高用户体验。当然，在使用时需要特别注意它的限制，以及在存储、读取和删除数据过程中的错误处理。关于作者刘筱雨，转转工程效率组内成员，主要负责公司内部公共系统前端项目。想了解更多转转公司的业务实践，点击关注下方的公众号吧！