HTML5のlocalStorageにオブジェクトを格納するサンプルコード
2022-01-21 23:13:34
HTML5でJavaScriptのオブジェクトを格納したい
localStorage
しかし、私のオブジェクトはどうやら文字列に変換されているようです。
JavaScriptの生の型や配列を保存したり取得したりするのに使うことができる
localStorage
が、オブジェクトが正常に動作しないようです。そうすべきなのでしょうか?
これは、私のコードです。
var testObject = { 'one': 1, 'two': 2, 'three': 3 }
console.log('typeof testObject: ' + typeof testObject);
console.log('testObject properties: ');
for (var prop in testObject) {
console.log(' ' + prop + ': ' + testObject[prop]);
}
// Put the object into storage
localStorage.setItem('testObject', testObject);
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ' + retrievedObject);
コンソール出力は
typeof testObject: オブジェクト
testObjectのプロパティです。
1
2: 2
three: 3
typeof retrievedObject: string
retrievedObjectの値。[object オブジェクト]。
と思われるのですが
setItem
メソッドは、入力を文字列に変換してから保存しています。
解決策
Apple、Mozilla、Mozillaのドキュメントを改めて見てみると、この機能は文字列のキーと値のペアを扱うことに限定されているようです。
回避策の1つは、オブジェクトが 文字列化 を作成し、取得時にそれをパースします。
var testObject = { 'one': 1, 'two': 2, 'three': 3 };
// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');
console.log('retrievedObject: ', JSON.parse(retrievedObject));
HTML5 localStorageのオブジェクトの保存については、この記事が全てです、HTML5 localStorageの詳細については、過去の記事を検索するか、引き続き以下の記事をご覧ください、今後ともよろしくお願いします。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
キャンバス三動的円描画法の説明(要約)
-
キャンバスをベースにしたHTML5で電子署名を実現、PDF文書も生成可能
-
キャンバステキストフィルリニアグラデーション使用詳細説明
-
データストレージの3つの方法、Cookie sessionstorage localstorageの類似点と相違点の分析
-
Html5は、コンテナは、画面の高さや残りの高さの適応的なレイアウトの実装を埋めることができます
-
画像処理におけるキャンバスの活用
-
iframeタグが入れ子になっている問題の解決法
-
iframeのクロスドメインでよく使われるいくつかの方法
-
HTML5 動画再生プラグイン video.js のご紹介
-
Canvas wave garlandのサンプルコード