René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"百度\u0026阿里编程题：模拟实现一个 localStorage","articleBody":"可参考来源：\r\n[第 103 题：模拟实现一个 localStorage](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/166)\r\n\r\n### 一、localStorage 特性\r\n\r\n**1. Storage Interface**\r\n- getItem(key)\r\n- setItem(key, value)\r\n- removeItem(key)\r\n- clear()\r\n- key(index)\r\n- length：readonly\r\n\r\n**2. 持久化存储**\r\n刷新、关闭页面依然存在\r\n\r\n**3. localStorage 中的键值对总是以字符串的形式存储 key.toString() value.toString()**\r\n\r\n```js\r\nlocalStorage.setItem('pzijun', 100)\r\nlocalStorage.getItem('pzijun')\r\n// \"100\"\r\n\r\nvar a = {a: 1}\r\nlocalStorage.setItem(a, {a:1})\r\nlocalStorage.getItem(a)\r\n// \"[object Object]\"\r\n\r\nvar b = {}\r\nlocalStorage.setItem(b, '11')\r\nlocalStorage.getItem(b)\r\n// \"11\"\r\nlocalStorage.getItem(a)\r\n// \"11\"\r\n```\r\n\r\n**4. same-origin rules 特定于页面的协议，以及隐身模式等的区别**\r\n\r\n当浏览器进入隐身模式(private browsing mode)的时候，会创建一个新的、临时的、空的数据库，用以存储本地数据(local storage data)。当浏览器关闭时，里面的所有数据都将被丢弃。\r\n\r\n\r\n### 二、用 cookie 模拟 localStorage\r\n\r\n\u003e 参考 [https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie)\r\n\r\n```javascript\r\nwindow.LS = {\r\n  getItem: function (sKey) {\r\n    if (!sKey || !this.hasOwnProperty(sKey)) {\r\n      return null;\r\n    }\r\n    return unescape(document.cookie.replace(new RegExp(\"(?:^|.*;\\\\s*)\" + escape(sKey).replace(/[\\-\\.\\+\\*]/g, \"\\\\$\u0026\") + \"\\\\s*\\\\=\\\\s*((?:[^;](?!;))*[^;]?).*\"), \"$1\"));\r\n  },\r\n  key: function (nKeyId) {\r\n    return unescape(document.cookie.replace(/\\s*\\=(?:.(?!;))*$/, \"\").split(/\\s*\\=(?:[^;](?!;))*[^;]?;\\s*/)[nKeyId]);\r\n  },\r\n  setItem: function (sKey, sValue) {\r\n    if (!sKey) {\r\n      return;\r\n    }\r\n    document.cookie = escape(sKey) + \"=\" + escape(sValue) + \"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/\";\r\n    this.length = document.cookie.match(/\\=/g).length;\r\n  },\r\n  length: 0,\r\n  removeItem: function (sKey) {\r\n    if (!sKey || !this.hasOwnProperty(sKey)) {\r\n      return;\r\n    }\r\n    document.cookie = escape(sKey) + \"=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/\";\r\n    this.length--;\r\n  },\r\n  hasOwnProperty: function (sKey) {\r\n    return (new RegExp(\"(?:^|;\\\\s*)\" + escape(sKey).replace(/[\\-\\.\\+\\*]/g, \"\\\\$\u0026\") + \"\\\\s*\\\\=\")).test(document.cookie);\r\n  }\r\n};\r\nwindow.LS.length = (document.cookie.match(/\\=/g) || window.LS).length;\r\n\r\nif (!window.localStorage) {\r\n  window.localStorage = window.LS;\r\n}\r\n```\r\n测试：\r\n```js\r\nLS.setItem('pzijun', 100)\r\nLS.getItem('pzijun')\r\n// \"100\"\r\n\r\nvar a = {\r\n  a: 1\r\n}\r\nLS.setItem(a, {\r\n  a: 1\r\n})\r\nLS.getItem(a)\r\n// \"[object Object]\"\r\n\r\nvar b = {}\r\nLS.setItem(b, '11')\r\nLS.getItem(b)\r\n// \"11\"\r\nLS.getItem(a)\r\n// \"11\"\r\n```\r\n\r\n另外还有容量控制、异常处理等，这里不再讨论，感兴趣的可以自己尝试实现下\r\n\r\n### 三、扩展 localStorage 支持 expires 过期时间\r\n```javascript\r\n(function () {\r\n  var getItem = localStorage.getItem.bind(localStorage)\r\n  var setItem = localStorage.setItem.bind(localStorage)\r\n  var removeItem = localStorage.removeItem.bind(localStorage)\r\n  localStorage.getItem = function (keyName) {\r\n    var expires = getItem(keyName + '_expires')\r\n    if (expires \u0026\u0026 new Date() \u003e new Date(Number(expires))) {\r\n      removeItem(keyName)\r\n      removeItem(keyName + '_expires')\r\n    }\r\n    return getItem(keyName)\r\n  }\r\n  localStorage.setItem = function (keyName, keyValue, expires) {\r\n    if (typeof expires !== 'undefined') {\r\n      var expiresDate = new Date(expires).valueOf()\r\n      setItem(keyName + '_expires', expiresDate)\r\n    }\r\n    return setItem(keyName, keyValue)\r\n  }\r\n})()\r\n```\r\n\r\n测试：\r\n```javascript\r\nlocalStorage.setItem('key', 'value', new Date() + 10000) // 10 秒钟后过期\r\nlocalStorage.getItem('key')\r\n```","author":{"url":"https://github.com/sisterAn","@type":"Person","name":"sisterAn"},"datePublished":"2020-09-16T00:05:21.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1},"url":"https://github.com/108/JavaScript-Algorithms/issues/108"}