web-dev-qa-db-ja.com

JSONデータをローカルストレージに保存および取得する方法

私はこのコードを持っています：

var string = '{"items":[{"Desc":"Item1"},{"Desc":"Item2"}]}';
localStorage.setItem('added-items', JSON.stringify(string));

このコードはlocalStorageを使用します。

保存されたデータを取得するコードは次のとおりです。

var retrievedObject = localStorage.getItem('added-items');

私の問題は、データ項目のサイズをどのように取得できますか？答えは2でなければなりません。

「Item1」と「Item2」を取得するにはどうすればよいですか？

私は試した retrievedObject[0][0]しかし、機能していません。

それにデータを追加する方法は？それで

{"items":[{"Desc":"Item1"},{"Desc":"Item2"},{"Desc":"Item3"}]}

使ってもいいですか JSON.stringify？

javascriptjsonlocal-storage
8
JMA
var string = '{"items":[{"Desc":"Item1"},{"Desc":"Item2"}]}';
localStorage.setItem('added-items', JSON.stringify(string));

stringifyは、objectを取り、そのプレゼンテーションをstringとして返すことを意味します。あなたが持っているものは、すでにJSONオブジェクトではなく文字列です。

逆はJSON.parseはstringを取り、objectに変換します。

どちらも配列のサイズを取得することとは関係ありません。 JavaScriptを適切にコーディングする場合、JSON.parseまたはJSON.stringify。 serializationが明示的に必要な場合のみ。

配列のサイズにlengthを使用します。

var obj = {"items":[{"Desc":"Item1"},{"Desc":"Item2"},{"Desc":"Item3"}]}
console.debug(obj.items.length);
9
Daniel W.
// THIS IS ALREADY STRINGIFIED
var string = '{"items":[{"Desc":"Item1"},{"Desc":"Item2"}]}';

// DO NOT STRINGIFY AGAIN WHEN WRITING TO LOCAL STORAGE
localStorage.setItem('added-items', string);

// READ STRING FROM LOCAL STORAGE
var retrievedObject = localStorage.getItem('added-items');

// CONVERT STRING TO REGULAR JS OBJECT
var parsedObject = JSON.parse(retrievedObject);

// ACCESS DATA
console.log(parsedObject.items[0].Desc);
4
user663031

この質問に出くわし、受け入れられた答えがあなたが期待し夢見ていたものすべてではないことがわかった将来の人々に明確さをもたらすために：

ユーザーがstringまたはJSONをlocalStorageに入力できるように、質問を拡張しました。

AddToLocalStorage(data)とGetFromLocalStorage(key)の2つの関数が含まれています。

AddToLocalStorage(data)を使用すると、入力がstringでない場合（JSONなど）、入力は1に変換されます。

GetFromLocalStorage(key)は、上記のlocalStorageのkeyからデータを取得します

スクリプトの最後に、JSON内のデータを調べて変更する方法の例を示します。オブジェクトと配列の組み合わせであるため、.と[]の組み合わせを使用する必要があります。

var string = '{"items":[{"Desc":"Item1"},{"Desc":"Item2"}]}';
var json = {"items":[{"Desc":"Item1"},{"Desc":"Item2"},{"firstName":"John"},{"lastName":"Smith"}]};

localStorage.setItem('added-items', AddToLocalStorage(string));
localStorage.setItem('added-items', AddToLocalStorage(json));

// this function converts JSON into string to be entered into localStorage
function AddToLocalStorage(data) {
  if (typeof data != "string") {data = JSON.stringify(data);}
  return data;
}

// this function gets string from localStorage and converts it into JSON
function GetFromLocalStorage(key) {
  return JSON.parse(localStorage.getItem(key));
}

var myData = GetFromLocalStorage("added-items");

console.log(myData.items[2].firstName)    // "John"

myData.items[2].firstName = ["John","Elizabeth"];
myData.items[2].lastName = ["Smith","Howard"];

console.log(myData.items[2])    // {"firstName":["John","Elizabeth"],"lastName":["Smith","Howard"]}

console.log(myData.items.length)    // 4
3
zack

JSON.parseは間違いなくオブジェクトを作成するための最良の方法ですが、それが機能しない場合（サポートが不足しているため）、obj = eval('(' + str + ')');が機能するはずです。過去にHTML to PDFコンバーターでJSON.parseを含まず、evalがトリックを行っていました。最初にJSON.parseを試してみてください。

オブジェクトにアクセスします：obj.items[0].Desc;

0
Donnie D'Amato