LocalStorage item gets overwritten by new item

Question

I am trying to use a LocalStorage so that every time I add a new task it adds to localstorage but at the moment it always overwritten the original one.

I have a wrapper for LocalStorage:

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

Then I have a React component where I import the wrapper, I have a simple form in that component with one input field and a button:

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

saveTodo function:

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

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

Now every time I execute the function it by hitting the button the LocalStorage get overwritten by the new value, but I want to keep adding onto the local storage

How can I achieve this?

This is what i have done so far:

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

I have added two items to localsotage:

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

So it works perfect now :)

Save an array to LS, read it, add a new item and write/save it again? — Wendelin, Dec 02 '19 at 21:17
Does this answer your question? [adding new objects to localstorage](https://stackoverflow.com/questions/12162786/adding-new-objects-to-localstorage) — Heretic Monkey, Dec 02 '19 at 21:22

score 2 · Accepted Answer · answered Dec 02 '19 at 21:20

2

You need to add it to the existing todo array from local storage. Something like this:

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

answered Dec 02 '19 at 21:20

symlink

11,984
7
29
50

Hey @symlink I have tried your solution and i get this: Storage {todo: "1", length: 1} length: 1 todo: "1" __proto__: Storage – John Dec 02 '19 at 21:36
Hey thank you very much your solution works just fine, but just so i understand: I first pharse the localstorage that changes it back to array then i push to the array then i set again? it is quiet confusing, could you explain this a bit more? and ps. i had to do this : const todo = JSON.parse(localStorage.getItem('todo')) || []; to avoid a console error – John Dec 02 '19 at 21:57
@John Line 2: you read the localStorage "todo" array into a local constant named `todo`. Line 3: you add the current item to the end of that array. Line 3: you put that array back into localStorage. – symlink Dec 02 '19 at 22:08

score 0 · Answer 2 · answered Dec 02 '19 at 21:30

It is good to save it as an array each time when you enter a new data.

localStorage.util.js

export const setItemToLocalStorage = (key, item = []) => {    
    localStorage.setItem(key, JSON.stringify(item));
}

export const getItemFromLocalStorage = (key) => {    
    return JSON.parse(localStorage.getItem(key));
}

component

constructor(props) {
    super(props)   
    initData();
}
const initData = () => {
    this.setState({
      todo: '',
      todoList: getItemFromLocalStorage('todoList') || []
    });
}
const saveLog = (e) => {
    e.preventDefault();
    setLocalStorage('todoList', [...this.state.todoList, this.state.todo]);
    initData();
}

score 0 · Answer 3 · answered Dec 02 '19 at 22:06

function saveTodo(newTodo) {
  try {
    const key = "todos";

    // Get todos from the storage
    const value = window.localStorage.getItem(key);

    let todos = [];
    if (value !== null) {
      // Parse the result into JSON
      todos = JSON.parse(value);
    }

    // Push new todo in the list
    todos[todos.length] = newTodo;

    // Save the result to the storage
    window.localStorage.setItem(key, todos);
  } catch (error) {
    // Log error
  }
}

LocalStorage item gets overwritten by new item

3 Answers3