公式Webサイト

概要

ローカルストレージとは検証ツールで「アプリケーション」を選択すると見れる、ドメイン毎のストレージで、最大5MBまでの情報を格納できます。

テキストベースの簡単なアプリケーション開発や、JSON、DBとのやりとりのイメージが湧くので、最初に突いてみるには最高の場所だと言えますね。

また、ローカルストレージに保存されている情報は、そのユーザーが削除しない限り残るので、ログインが不要なのにユーザーの入力情報を保持するという特徴があります。

小さい規模でそういうアプリケーションを作成するにはもってこいの場であると言えますね。

ローカルストレージに値を入れてみる

localStorage.setItem()

ローカルストレージに値を入れる際はlocalStorageオブジェクトのsetItem()メソッドを用います。

setItemメソッドの引数に対し

//　(キー,値) 
const setItem = localStorage.setItem("key","value");

ローカルストレージの値を取り出してみる

localStorage.getItem()

ローカルストレージから値を取り出すには、localStorageオブジェクトのgetItem()メソッドを用います。

getItemメソッドの引数に対し

//　(キー) 
const getItem = localStorage.getItem("key");
console.log(getItem);
//出力結果　"value"　となります。

という形でキーを入れてあげることで、そのキーと一緒に登録された値が取り出されます。

ただ、上記だと1つのキーに対し、1つの値しか入れられないじゃん！！

と思いますよね？

はい、その通りです。

しかし、値をJSONにするとどうでしょうか？

オブジェクトを突っ込むことができるので、沢山の値を入れることが可能となります。

JSON形式を値に入れてみる

まず、JSON形式を作ってみましょう。

JSON形式の扱いについては下記で触れていますので、参考にしてみてください。

https://www.p-digital.online/json%e6%93%8d%e4%bd%9c/

//オブジェクトを作る
const obj = {"name":"Taro","age":24};

//JSON形式に変換する 
const jsonObj = JSON.stringify(obj);

//ローカルストレージに保存する 
const setItem = localStorage.setItem("key",jsonObj);

上記で、二つの値をもつオブジェクトをJSON形式にしてローカルストレージに保管できました！

続いてはその値を取り出してみようではありませんか！

JSON形式の値を取り出してみる

//登録した値を取得
const getItem = localStorage.getItem("key");

//取得したJSON形式をオブジェクトに変換
const getJsonItem = JSON.parse(getItem);

console.log(getJsonItem.name);
//出力結果　"Taro"　となります

このような形で、JSONファイルをローカルストレージに入れることにより、複数の値を格納し、取り出すことが可能となります。

ローカルストレージの値を全て取り出してみる

localStorage.key()

ローカルストレージ内に複数のキーと値のセットが存在する場合、localStorageオブジェクトのkyeメソッドを使用することで、任意の順番のキーを取得することが可能です。

//kyeの引数に取得したい順番の数値を入れる
const secondItem = localStorage.key(1);

console.log(secondItem);
//2番目に登録されているアイテムのキーが出力されます。

上記でキーが取り出せましたね。

・・・え？値は？

そうなりますよね、勿論値も取り出せます。

取得する方法はこれまでと同じで、getItemを用います。

また、localStorage内のアイテムは配列となっている為、for文が使用できます。

const strageAry = []; 

for(let i = 0 ; i < localStorage.length ; i++){ 
const keyName = localStorage.key(i); 
const itemValue = localStorage.getItem(key); 
strageAry.push({keyName,itemValue}); 
}

console.log(strageAry);
// {1個目のkey:1個目のitem},{2個目のkey:3個目のitem}...と出力されます。

これで、strageAry配列にオブジェクトとして、キーとその値が全て格納される形となりました。