localStorage array.push

Question

有人可以告訴我如何將元素推送到 localStorage 中的數組中嗎？

我的代碼：

 (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

一般的做法：

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

您遇到的問題是存儲在localStorage中的數據必須是字符串。 在從本地存儲設置/獲取任何內容之前，您必須解析/字符串化。 如果您不想使用字符串，您可能會發現類似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'));

這是使用文檔中的 IndexedDB API 的示例

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

根據您的需要，還有其他解決方案，例如PouchDB

Answer 3

假設您的數據不是多維數組，我會執行以下操作。

(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

例如說你有一個數組。 這就是您可以將其存儲在本地存儲中的方式。

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

現在要將任何數據推送到本地存儲陣列中，您必須用新數據覆蓋，如下所示

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