第 103 题：模拟实现一个 localStorage

[yygmind]

[EnergySUD]

		const localStorageMock = (function() {
			let store = {}
			return {
				getItem: function(key) { return store[key] || null },
				setItem: function(key, value) { store[key] = value.toString() },
				removeItem: function(key) { delete store[key] },
				clear: function() { store = {} },
			}
		})()

		Object.defineProperty(window, 'localStorage2', {
			value: localStorageMock
		})
		
		localStorage2.setItem('test', 'test')
		console.log(localStorage2.getItem("test"))  //test
		localStorage2.removeItem('test')
		console.log(localStorage2.getItem("test"))  //null
		localStorage2.setItem('test', 'test')
		localStorage2.clear()
		console.log(localStorage2.getItem("test"))  //null

[negativeentropy9]

` const localStorageMock = (function() {
let store = {}
return {
getItem: function(key) { return store[key] || null },
setItem: function(key, value) { store[key] = value.toString() },
removeItem: function(key) { delete store[key] },
clear: function() { store = {} },
}
})()

		Object.defineProperty(window, 'localStorage2', {
			value: localStorageMock
		})
		
		localStorage2.setItem('test', 'test')
		console.log(localStorage2.getItem("test"))  //test
		localStorage2.removeItem('test')
		console.log(localStorage2.getItem("test"))  //null
		localStorage2.setItem('test', 'test')
		localStorage2.clear()
		console.log(localStorage2.getItem("test"))  //null`

没有校验 value 是否为字符串

[EnergySUD]

` const localStorageMock = (function() {
let store = {}
return {
getItem: function(key) { return store[key] || null },
setItem: function(key, value) { store[key] = value.toString() },
removeItem: function(key) { delete store[key] },
clear: function() { store = {} },
}
})()

		Object.defineProperty(window, 'localStorage2', {
			value: localStorageMock
		})
		
		localStorage2.setItem('test', 'test')
		console.log(localStorage2.getItem("test"))  //test
		localStorage2.removeItem('test')
		console.log(localStorage2.getItem("test"))  //null
		localStorage2.setItem('test', 'test')
		localStorage2.clear()
		console.log(localStorage2.getItem("test"))  //null`

没有校验 value 是否为字符串

因为自带的localStorage也是把对象自动转成字符串的。我测试过自带的localStorage也是这样子。

[nano-papa]

'use strict'
const valuesMap = new Map()

class LocalStorage {
  getItem (key) {
    const stringKey = String(key)
    if (valuesMap.has(key)) {
      return String(valuesMap.get(stringKey))
    }
    return null
  }

  setItem (key, val) {
    valuesMap.set(String(key), String(val))
  }

  removeItem (key) {
    valuesMap.delete(key)
  }

  clear () {
    valuesMap.clear()
  }

  key (i) {
    if (arguments.length === 0) {
      throw new TypeError("Failed to execute 'key' on 'Storage': 1 argument required, but only 0 present.") // this is a TypeError implemented on Chrome, Firefox throws Not enough arguments to Storage.key.
    }
    var arr = Array.from(valuesMap.keys())
    return arr[i]
  }

  get length () {
    return valuesMap.size
  }
}
const instance = new LocalStorage()

global.localStorage = new Proxy(instance, {
  set: function (obj, prop, value) {
    if (LocalStorage.prototype.hasOwnProperty(prop)) {
      instance[prop] = value
    } else {
      instance.setItem(prop, value)
    }
    return true
  },
  get: function (target, name) {
    if (LocalStorage.prototype.hasOwnProperty(name)) {
      return instance[name]
    }
    if (valuesMap.has(name)) {
      return instance.getItem(name)
    }
  }
})

[lvwxx]

class mockLocalStorage {
  constructor() {
    this.store =  {}
  }
  getItem(key) {
    return this.store[key] || null
  }
  setItem(key,value) {
    this.store[key] = value
  }
  removeItem(key) {
    delete this.store[key]
  }
  clear() {
    this.store = {}
  }
}
window.localStorage2 = new mockLocalStorage()

[little-kun]

这答案吓到我了。存储过之后，刷新页面，还能取出来吗？？？

[yoluxi]

'use strict'
const valuesMap = new Map()

class LocalStorage {
  getItem (key) {
    const stringKey = String(key)
    if (valuesMap.has(key)) {
      return String(valuesMap.get(stringKey))
    }
    return null
  }

  setItem (key, val) {
    valuesMap.set(String(key), String(val))
  }

  removeItem (key) {
    valuesMap.delete(key)
  }

  clear () {
    valuesMap.clear()
  }

  key (i) {
    if (arguments.length === 0) {
      throw new TypeError("Failed to execute 'key' on 'Storage': 1 argument required, but only 0 present.") // this is a TypeError implemented on Chrome, Firefox throws Not enough arguments to Storage.key.
    }
    var arr = Array.from(valuesMap.keys())
    return arr[i]
  }

  get length () {
    return valuesMap.size
  }
}
const instance = new LocalStorage()

global.localStorage = new Proxy(instance, {
  set: function (obj, prop, value) {
    if (LocalStorage.prototype.hasOwnProperty(prop)) {
      instance[prop] = value
    } else {
      instance.setItem(prop, value)
    }
    return true
  },
  get: function (target, name) {
    if (LocalStorage.prototype.hasOwnProperty(name)) {
      return instance[name]
    }
    if (valuesMap.has(name)) {
      return instance.getItem(name)
    }
  }
})

代理中这个判断又什么作用呀

[nano-papa]

'use strict'
const valuesMap = new Map()

class LocalStorage {
  getItem (key) {
    const stringKey = String(key)
    if (valuesMap.has(key)) {
      return String(valuesMap.get(stringKey))
    }
    return null
  }

  setItem (key, val) {
    valuesMap.set(String(key), String(val))
  }

  removeItem (key) {
    valuesMap.delete(key)
  }

  clear () {
    valuesMap.clear()
  }

  key (i) {
    if (arguments.length === 0) {
      throw new TypeError("Failed to execute 'key' on 'Storage': 1 argument required, but only 0 present.") // this is a TypeError implemented on Chrome, Firefox throws Not enough arguments to Storage.key.
    }
    var arr = Array.from(valuesMap.keys())
    return arr[i]
  }

  get length () {
    return valuesMap.size
  }
}
const instance = new LocalStorage()

global.localStorage = new Proxy(instance, {
  set: function (obj, prop, value) {
    if (LocalStorage.prototype.hasOwnProperty(prop)) {
      instance[prop] = value
    } else {
      instance.setItem(prop, value)
    }
    return true
  },
  get: function (target, name) {
    if (LocalStorage.prototype.hasOwnProperty(name)) {
      return instance[name]
    }
    if (valuesMap.has(name)) {
      return instance.getItem(name)
    }
  }
})

代理中这个判断又什么作用呀
localStorage不就这样么，你可以拿个浏览器看一下，这个比较细节了

[negativeentropy9]

` const localStorageMock = (function() {
let store = {}
return {
getItem: function(key) { return store[key] || null },
setItem: function(key, value) { store[key] = value.toString() },
removeItem: function(key) { delete store[key] },
clear: function() { store = {} },
}
})()

		Object.defineProperty(window, 'localStorage2', {
			value: localStorageMock
		})
		
		localStorage2.setItem('test', 'test')
		console.log(localStorage2.getItem("test"))  //test
		localStorage2.removeItem('test')
		console.log(localStorage2.getItem("test"))  //null
		localStorage2.setItem('test', 'test')
		localStorage2.clear()
		console.log(localStorage2.getItem("test"))  //null`

没有校验 value 是否为字符串

因为自带的localStorage也是把对象自动转成字符串的。我测试过自带的localStorage也是这样子。

localStorage.setItem('test',{a:'a'})

[EnergySUD]

` const localStorageMock = (function() {
let store = {}
return {
getItem: function(key) { return store[key] || null },
setItem: function(key, value) { store[key] = value.toString() },
removeItem: function(key) { delete store[key] },
clear: function() { store = {} },
}
})()

		Object.defineProperty(window, 'localStorage2', {
			value: localStorageMock
		})
		
		localStorage2.setItem('test', 'test')
		console.log(localStorage2.getItem("test"))  //test
		localStorage2.removeItem('test')
		console.log(localStorage2.getItem("test"))  //null
		localStorage2.setItem('test', 'test')
		localStorage2.clear()
		console.log(localStorage2.getItem("test"))  //null`

没有校验 value 是否为字符串

因为自带的localStorage也是把对象自动转成字符串的。我测试过自带的localStorage也是这样子。

localStorage.setItem('test',{a:'a'})

我的也是这样的，你可以试一下啊。

[michaelcai]

'use strict'
const valuesMap = new Map()

class LocalStorage {
  getItem (key) {
    const stringKey = String(key)
    if (valuesMap.has(key)) {
      return String(valuesMap.get(stringKey))
    }
    return null
  }

  setItem (key, val) {
    valuesMap.set(String(key), String(val))
  }

  removeItem (key) {
    valuesMap.delete(key)
  }

  clear () {
    valuesMap.clear()
  }

  key (i) {
    if (arguments.length === 0) {
      throw new TypeError("Failed to execute 'key' on 'Storage': 1 argument required, but only 0 present.") // this is a TypeError implemented on Chrome, Firefox throws Not enough arguments to Storage.key.
    }
    var arr = Array.from(valuesMap.keys())
    return arr[i]
  }

  get length () {
    return valuesMap.size
  }
}
const instance = new LocalStorage()

global.localStorage = new Proxy(instance, {
  set: function (obj, prop, value) {
    if (LocalStorage.prototype.hasOwnProperty(prop)) {
      instance[prop] = value
    } else {
      instance.setItem(prop, value)
    }
    return true
  },
  get: function (target, name) {
    if (LocalStorage.prototype.hasOwnProperty(name)) {
      return instance[name]
    }
    if (valuesMap.has(name)) {
      return instance.getItem(name)
    }
  }
})

代理中这个判断又什么作用呀

localStorage 可以通过 localStorage.xxx 方式取值。

[jhoneybee]

如果我翻译的没错,红色下面应该说的是localStorage保存的数据理应都是字符串

[jhoneybee]

https://html.spec.whatwg.org/multipage/webstorage.html#dom-localstorage

这个是localStorage的定义似乎还挺复杂的

[wingmeng]

难道不是应该用 cookie 模拟 localStorage 吗（兼容 IE8 及以下的 polyfill）？

!window.localStorage && !function(win) {
  var thousandYears = 1e3 * 365 * 24 * 36e5;

  function getCookies() {
    return document.cookie.match(/([^;=]+)=([^;]+)/g) || [];
  }

  function getExpires(flag) {
    flag = flag || 1;

    return 'expires=' +
      (new Date((+new Date()) + thousandYears * flag)).toUTCString();
  }

  function get(key) {
    var cookies = getCookies();

    for (var i = 0; i < cookies.length; i++) {
      var param = cookies[i].match(/^\s*([^=]+)=(.+)/);

      if (param[1] === String(key)) {
        return decodeURIComponent(param[2]);
      }
    }

    return null;
  }

  function set(key, value, isExpired) {
    document.cookie = [
      key + '=' + encodeURIComponent(value),
      getExpires(isExpired ? -1 : 1),
      'path=/'
    ].join('; ');
  }

  function remove(key) {
    set(key, '', true);
  }

  function clear() {
    var cookies = getCookies();

    for (var i = 0; i < cookies.length; i++) {
      var key = cookies[i].match(/^\s*([^=]+)/)[1];
      remove(key);
    }
  }

  // 注册到 window 对象上
  win.localStorage = {
    getItem: get,
    setItem: set,
    removeItem: remove,
    clear: clear
  };
}(window);