localStorage array.push

Question

Could someone tell me how to push elements into an array in localStorage?

My code:

 (localStorage.getItem('projects') === null)? localStorage.setItem('projects', ['proj1', 'proj2', 'proj3']): ''; var ItemGet = localStorage.getItem('projects'); function CreateObject() { console.log(ItemGet); var Serializable = JSON.parse(ItemGet); Serializable.push('proj4'); console.log(ItemGet); }

 <button onclick="CreateObject()">Add Object</button>

Answer 1

General approach:

let old_data = JSON.parse(localStorage.getItem('projects'))

let new_data = old_data.push(some_new_data)

localStorage.setItem('projects',JSON.stringify(new_data))

Answer 2

The problem you are hitting is that data stored in localStorage has to be a string. You'll have to parse/stringify before settting/getting anything from local storage. If you didn't want to work with strings, you may find something like IndexedDB API

const stuff = [ 1, 2, 3 ];

// Stringify it before setting it
localStorage.setItem('stuff', JSON.stringify(stuff));

// Parse it after getting it
JSON.parse(localStorage.getItem('stuff'));

Here is an example of using IndexedDB API from the docs

const dbName = "the_name";

var request = indexedDB.open(dbName, 2);

request.onerror = function(event) {
  // Handle errors.
};
request.onupgradeneeded = function(event) {
  var db = event.target.result;

  // Create an objectStore to hold information about our customers. We're
  // going to use "ssn" as our key path because it's guaranteed to be
  // unique - or at least that's what I was told during the kickoff meeting.
  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });

  // Create an index to search customers by name. We may have duplicates
  // so we can't use a unique index.
  objectStore.createIndex("name", "name", { unique: false });

  // Create an index to search customers by email. We want to ensure that
  // no two customers have the same email, so use a unique index.
  objectStore.createIndex("email", "email", { unique: true });

  // Use transaction oncomplete to make sure the objectStore creation is
  // finished before adding data into it.
  objectStore.transaction.oncomplete = function(event) {
    // Store values in the newly created objectStore.
    var customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers");
    customerData.forEach(function(customer) {
      customerObjectStore.add(customer);
    });
  };
};

There are also other solutions out there like PouchDB depending on your needs

Answer 3

I would do the following assuming that your data is not a multiDimensional array.

(localStorage.getItem('projects') === null) ? localStorage.setItem('projects', 
JSON.stringify(['proj1', 'proj2', 'proj3'])) : '';
var ItemGet = localStorage.getItem('projects');
function CreateObject() {
     var Serializable = JSON.parse(ItemGet);
     Serializable.push('proj4');
     localStorage.setItem('projects',JSON.stringify(Serializable));
}

Answer 4

Say for example you have an array. This is how you can store it in the local storage.

let my_array = [1, 2, 3, 4];
localStorage.setItem('local_val', JSON.stringify(my_array))

Now to push any data into the local storage array you have to override by the new data like bellow

let oldArray = JSON.parse(localStorage.getItem('local_val'))
oldArray.push(1000)
localStorage.setItem('local_val', JSON.stringify(oldArray))