JavaScript | 配列をローカルストレージで保存、取得する方法
JavaScriptで配列データをサイトのコンテンツデータとしてローカルストレージに保存する方法を紹介しています。
このサンプルコードは配列・オブジェクト型のデータでも同様に扱えます。
配列をローカルストレージに保存する
配列データをローカルストレージで扱うには、配列をJSONデータに変換する必要があります。
まず、window.localStorageで端末・ブラウザがローカルストレージを扱える設定になっているかどうかを確認します。
ローカルストレージが有効の場合、JSON.stringify()メゾッドにて配列型をJson型に変換します。
変換したJSONデータをlocalStorage.setItem()メゾッドでローカルストレージに保存します。
配列をローカルストレージから取得する
保存されているJSONデータをローカルストレージから取得して、配列データに変換します。
まず、window.localStorageで端末・ブラウザがローカルストレージを扱える設定になっているかどうかを確認します。
ローカルストレージが有効の場合、localStorage.getItem()メゾッドで保存されているデータのキー名を指定してJSONデータを取得します。
取得したJSONデータをJSON.parse()にて配列、あるいはオブジェクト(連想配列)に変換して利用します。
ローカルストレージに保存されているデータの削除
localStorage.removeItem()にて保存されているデータをキー名単位でローカルストレージから削除します。
ローカルストレージに保存されているサイト・コンテンツのデータを一括で削除するにはstorage.clear()が利用できます。
ディスカッション
誤:メゾット
正:メソッド
こちらの記事わかりやすくてとても助かりました!
ありがとうございます!
コメントありがとうございます。
少しでもお役にたてたのなら幸いです。