最近Chromeの拡張機能を作っていた際に、設定ファイルであるローカルのJSONファイルにJavaScriptでアクセスする必要がありました。
ネットで調べればすぐに方法が見つかると思いきや、JavaScriptでローカルファイルにアクセスするのはかなり難しそう（ローカルサーバを立ち上げれば不可能ではなさそう？）
何か方法は無いかと調べていくと、ブラウザのlocal Storageという機能を使えば擬似的にローカルのJSONファイルにアクセスするのと同じ操作が出来そうです。
ということで今回はlocalStorageについてまとめました！
Local Storageとは
簡単にlocalStorageについて解説します。
localStorageとはHTML5から導入されたAPIで、localStorageを使うことでサイト毎にデータを保存することができます。
保存したデータは使用しているパソコンの「ブラウザ」にキーと値のペアで保存されます。なので異なるブラウザを使用する場合や異なるパソコンからはデータにアクセスすることはできません。
localStorageはJavaScriptで簡単に制御できる点などから、サイトの設定やチェックボックスの保存などの用途で使われることが多いです。
local Storage基本コマンド
ここではJavaScriptでlocalStorageを操作するときの基本コマンドを紹介します。
データの保存
データの保存には引数にキーと値を与えてlocalStorage.SetItem()を使用します。
//localStorage.SetItem("キー", "値");
localStorage.setItem("name", "Edaha");データの参照
保存したデータの参照には引数にキーを与えてlocalStorage.getItem()を使用します。
//localStorage.getItem("キー");
const user_name = localStorage.getItem("name");n番目のデータの参照
保存したデータのn番目を参照するにはlocalStorage.key()を使用します。
//localStorage.key(n)
const key = localStorage.key(1)保存したデータ数の取得
保存したデータ数の取得にはlocalStorage.lengthを使用します。
//localStorage.length
const length = localStorage.length特定データの削除
特定のデータを削除には引数にキーを与えてlocalStorage.removeItem()を使用します。
//localStorage.removeItem("キー");
localStorage.removeItem("name");全データの削除
保存した全データの削除にはlocalStorage.clear()を使用します。
localStorage.clear()まとめ
今回はlocalStorageの概要とその使い方についてまとめました。
この記事で不明な点や気になるところがあれば下のコメント欄までお願いします。それではまた！
コメント