按设置的顺序获取所有本地存储项目

Question

我想知道是否有一种方法可以按照放入的顺序遍历所有本地存储数据。问题是我的键是对象的 id 并且不会按顺序排列。

我可以有一个 id 为 102 的项目，下一个是 3。我需要保留这些 id，因为所有 tr 都用这些 id 标识，以便我可以操纵它们，所以我需要 localstorage.setitem(ID ,data) 保持这样。

有没有办法像推送/弹出本地存储或类似 localStorage.First() 这样我可以按顺序获取我的项目？

Answer 1

您将 localStorage 视为数组，但 localStorage 是哈希。在localStorage中创建自己的变量，实现两个方法：push和pop

class LocalStorageStack {
  constructor(stackName) {
    this.stackName = stackName
  }

  push = (value) => {
    const stack = this.stack
    stack.push(value)
    this.stack = stack
  }

  pop = () => {
    const stack = this.stack
    const value = stack.pop()
    this.stack = stack
    return value
  }

  get stack() {
    return (window.localStorage[this.stackName] || '').split(',')
  }

  set stack(values) {
    window.localStorage[this.stackName] = values.join(',')
  }
}

const localStorageStack = new LocalStorageStack('myStack')

localStorageStack.push('111')
localStorageStack.push('112')

您可以在 localStorage.myStack 中看到字符串变量 == '111,112' 并且可以按倒序弹出值：

localStorageStack.pop()
=> "112"
localStorageStack.pop()
=> "111"

const windowLocalStorage = {}

class LocalStorageStack {
  constructor(stackName) {
    this.stackName = stackName
  }

  push = (value) => {
    const stack = this.stack
    stack.push(value)
    this.stack = stack
  }

  pop = () => {
    const stack = this.stack
    const value = stack.pop()
    this.stack = stack
    return value
  }

  get stack() {
    // Sorry, in the snippet localStorage is disabled by security reasons.
    // In this example local variable `windowLocalStorage emulates them
    return (windowLocalStorage[this.stackName] || '').split(',')
  }

  set stack(values) {
    windowLocalStorage[this.stackName] = values.join(',')
  }
}

const localStorageStack = new LocalStorageStack('my-stack')
console.log('push 111')
localStorageStack.push('111')
console.log('push 112')
localStorageStack.push('112')

console.log(localStorageStack.pop())
console.log(localStorageStack.pop())