时间戳

首页 > 解决方案 > LocalStorage 项目被新项目覆盖

javascript - LocalStorage 项目被新项目覆盖

问题描述

我正在尝试使用 LocalStorage ，以便每次添加新任务时它都会添加到本地存储中，但目前它总是会覆盖原始任务。

我有一个 LocalStorage 的包装器：

export const setLocalStorage = (item) => {    
    localStorage.setItem('todo', JSON.stringify(item));
}

然后我有一个导入包装器的 React 组件，我在该组件中有一个简单的表单，其中包含一个输入字段和一个按钮：

<Button onClick={(e) => { saveTodo(e) }}> Save Changes </Button>

保存待办事项功能：

constructor(props) {
    super(props)   
    this.state = {
      todo: '',
    }
}

const saveLog = (e) => {
    e.preventDefault();
    setLocalStorage(this.state.todo);
}

现在每次我通过点击按钮执行函数时，LocalStorage 都会被新值覆盖，但我想继续添加到本地存储中

我怎样才能做到这一点？

这是我到目前为止所做的：

export const setLocalStorageItem = (todo) => {
    var todoList = JSON.parse(localStorage.getItem('todo')) || [];
    console.log(todoList);
    todoList.push(todo)
    localStorage.setItem('todo', JSON.stringify(todoList));
}

我在 localsotage 中添加了两个项目：

Storage {todo: "["hello","123"]", length: 1}
length: 1
todo: "["hello","123"]"
__proto__: Storage

所以它现在完美无缺:)

标签： javascriptreactjs

解决方案

您需要将其todo从本地存储添加到现有阵列。像这样的东西：

export const setLocalStorage = (item) => {    
   const todo = JSON.parse(localStorage.getItem('todo'));
   todo.push(item);
   localStorage.setItem('todo', JSON.stringify(todo));
}

推荐阅读