LocalStorage item gets overwritten by new item

localstorage update item
localstorage add item to array
update localstorage item value
localstorage replace item
localstorage set item example
localstorage getitem
localstorage setitem object
local storage array push

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 :)

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));
}

How to update localStorage() with vanilla JavaScript, If it does, we'll use string concatenation to add our new item to the end of it. Otherwise, we'll Get the existing data var existing = localStorage. The localStorage object is a type of web storage that allows Javascript websites and apps to store and access data right in the browser with no expiration date. This means the data stored in the browser will persist even after the browser window has been closed. The localStorage property object is read-only.

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();
}

Overwriting variable value in localstorage? - JavaScript, first page of my document i set in the local storage like this: window. set a new value, meaning that the events keep happening every time i� The removeItem() method of the Storage interface, when passed a key name, will remove that key from the given Storage object if it exists. The Storage interface of the Web Storage API provides access to a particular domain's session or local storage.

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
  }
}

React.js - how to not overwrite data in Locale Storage?, Anyway I'd suggest to encapsulate the product logic in a dedicated But note that writing to the local storage is rather slow, and doing so on to get the value property of e.target.value , which is one value too much. First, retrieve the record you'd like to update, then update the record with a new value:. The read-only localStorage property allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions. localStorage is similar to sessionStorage, except that while data stored in localStorage has no expiration time, data stored in sessionStorage gets cleared when the page session ends — that is, when the page is closed.

Storage.setItem(), The following function creates three data items inside local storage. function populateStorage() { localStorage.setItem('bgcolor� To use localStorage in your web applications, there are five methods to choose from: setItem(): Add key and value to localStorage; getItem(): Retrieve a value by the key from localStorage; removeItem(): Remove an item by key from localStorage; clear(): Clear all localStorage; key(): Passed a number to retrieve nth key of a localStorage; setItem()

Trying to build a simple to-do app. I have a question about storing , getElementById("item").value; todos.push(item); localStorage. the value is pushed, the function reloads and if you add a new item, it pushes a new value, thus rewriting the old. How I should refactor the code, so it updates the array, not overwrites it? My logic was like to push and see it it gets values. The localStorage and sessionStorage properties allow to save key/value pairs in a web browser. The localStorage object stores data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year. The localStorage property is read-only.

$localStorage Array gets overwrite the array value - ionic-v1, an items array. My array data gets stored in the $localStorage. Whenever I go back to the previous page and add a new item array, the $local… When the data gets updated in localStorage or sessionStorage, storage event triggers, with properties: key – the key that was changed (null if .clear() is called). oldValue – the old value (null if the key is newly added). newValue – the new value (null if the key is removed). url – the url of the document where the update happened.

Comments
  • Save an array to LS, read it, add a new item and write/save it again?
  • ps the word you're looking for is "overwrite"
  • Does this answer your question? adding new objects to localstorage
  • Hey @symlink I have tried your solution and i get this: Storage {todo: "1", length: 1} length: 1 todo: "1" proto: Storage
  • 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 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.