Question

我的页面上有两个不同的列表，我想将这些数据存储在本地存储中。通过下面的这段代码，我将数据存储在一个列表中。如何使用此代码存储来自两个列表的数据，但要存放在单独的对象中？也许这个问题很愚蠢，但是我是一个初学者。感谢您的帮助。

class Storage {

       saveStorage(task) {
         const tasks= this.getFromStorage();
         tasks.push(task);
         localStorage.setItem('tasks', JSON.stringify(tasks));
    }

     removeStorage(task){
        const tasks= this.getFromStorage();
        recipes.forEach((task, index) => {
            if(task === task.id) {
                tasks.splice(index,1);
            }
        });
        localStorage.setItem('tasks', JSON.stringify(tasks));
    }

    getStorage() {
        let tasks;

        if(localStorage.getItem('tasks') === null) {
            tasks= [];
        } else {
            tasks= JSON.parse(localStorage.getItem('tasks'));
        }
        return tasks;
    }
}

Answer 1

将名称传递给构造函数，例如：

constructor(name) { this.name = name; }

然后将tasks替换为this.name，例如：

localStorage.getItem(this.name)

然后您可以做：

const tasks = new Storage("tasks");
const users = new Storage("users");

Answer 2

如果我对您的问题的理解正确，则需要调整函数的结构，以使用一个参数来定义要编辑的列表。

然后，您的存储空间应包含Array中的Objects，并且每个对象都必须具有一个标识符，例如名称或ID，然后可以使用该标识符来标识不同的列表。

然后，您需要将它们传递给函数以进行修改和检索。传递该确切的ID或名称，然后应编写函数代码以在数组中查找正确的对象。可以使用array.find（例如someArray.find(x = >x.name === "List1")）轻松完成。

希望有帮助。

Answer 3

尝试类似的方法，这种方法更加通用且可重用。

class Storage {

  static saveStorage(obj, key) {
    const store = Storage.getFromStorage(key);
    store.push(obj);
    localStorage.setItem(key, JSON.stringify(store));
  }

  static removeStorage(obj, key, fnCompare) {
    const store = Storage.getFromStorage(key);
    store.forEach((item, index) => {
      if (fnCompare && fnCompare(obj, item)) {
        store.splice(index, 1);
      } else if (item == obj) {
        store.splice(index, 1);
      }
    });
    Storage.saveStorate(store, key);
  }

  static getFromStorage(key) {
    if (localStorage.getItem(key) === null) {
      return [];
    } else {
      return JSON.parse(localStorage.getItem(key));
    }

  }
  
}

然后您可以这样称呼它：

Storage.saveStorage({ test: 'true'}, 'test');
Storage.removeStorage({ test: 'true'}, 'test', function(curr, prev) { return curr.test == prev.test});
Storage.getFromStorage('test')

Answer 4

我会使用更通用的东西。将“任务”硬编码在其中，使事情难以重用。同样，这是建立的，因此所有存储的数据必须是一个数组或数组中的项-我将其更改为处理所有类型。如果您想将某些东西注入到数组中，我认为您可以并且应该在Storage类之外执行该操作，然后再次保存。此外，将复杂的对象拉出后，将需要“恢复”。

要注意的另一件事是，由于JSON不存储对象引用数据，因此您可能会遇到“ JSON图形问题”。请谨慎使用。以下是有关此内容的更多信息：http://netflix.github.io/falcor/documentation/jsongraph.html。

请参见下面的示例代码，这是一个有效的jsfiddle来演示：https://jsfiddle.net/wd4acLfv/45/

class Storage {
  static get(key, reviveFuncOrDefault = null) {
    const itemJSON = localStorage.getItem(key)
    
    if (reviveFuncOrDefault !== null) {
      if (itemJSON === null)
      	return reviveFuncOrDefault
      else if (typeof reviveFuncOrDefault === 'function')
        return reviveFuncOrDefault(JSON.parse(itemJSON))
    }
    
    return JSON.parse(itemJSON)
  }
  
  static set(key, item) {
    localStorage.setItem(key, JSON.stringify(item))
  }
  
  static unset(key) {
    localStorage.removeItem(key)
  }
}

// Plain Object
Storage.set('obj', { foo: 'bar '})  // Set object
console.log(Storage.get('obj', {})) // Object exists
console.log(Storage.get('obj2', {})) // Object fallback value

// Primitive Type
Storage.set('bool', true) // Set array
console.log(Storage.get('bool', false)) // Array exists
console.log(Storage.get('bool2', false)) // Array fallback value

// Array
Storage.set('arr', [ 1, 2, 3 ]) // Set array
console.log(Storage.get('arr', [])) // Array exists
console.log(Storage.get('arr2', [])) // Array fallback value

// Mutate array
const arr = Storage.get('arr', [])
arr.push(4)
Storage.set('arr', arr)
console.log(Storage.get('arr', []))

// Non-plain JS Object
class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName
    this.lastName = lastName
  }
  
  getFullName() {
    return this.firstName + ' ' + this.lastName
  }
}
Storage.set('person', new Person('Bob', 'Ross')) // Set object
const person = Storage.get('person',
  ({ firstName, lastName }) => new Person(firstName, lastName)
)
console.log(person.getFullName())

多个项目本地存储javascript

4 个答案: