deve.K

エンジニアが未来を切り開く。

JavaScript localStorageの使い方 データ保存と削除

JSでのlocalStorageの使い方

本日はJavaScriptでローカルストレージを使用する方法について学習します。

Web StorageまたはlocalStorageとはなんなのか、メリットやデメリットそして安全性などに関する詳しい事は下記で解説しております。

dev-k.hatenablog.com

このチュートリアルの前提条件は、JavaScriptに関する基本的な考え方を持っていることです。

事前準備

・JSのある程度の知識

Web Storageのメリット・デメリット・安全性等

テキストエディタ(VS Codeなど)

・ブラウザはChromeを使用します

それでは少しlocalStoragのおさらいだけしましょう。

必要ない方はスキップして頂いて構いません。

localStoragとは?

localStorageはHTML5の新しいJavaScript APIであり、ブラウザ内にデータを保存するための便利な方法です。

LocalStorageオブジェクトは、JavaScriptのWebサイトおよびアプリケーションが、有効期限なしでブラウザにデータを直接保存してアクセスできるようにするWebストレージの一種です。

データはブラウザセッション間で保存されます。

つまりこれは単に、ブラウザのウィンドウを閉じた後もWebブラウザに保存されているデータが保持されることを意味しています。

キーと値のペアを保存できるようにするプロパティとなります。

抑えておくべきポイントは、localStorageプロパティオブジェクトが読み取り専用であることです。

localStorageの使用方法

localStorageにはたくさんの便利なメソッドがあります。

CRUD(作成、読み取り、更新、削除)操作を使用して簡単に実行できます。

これらの方法については、1つずつ説明します。

データの追加

localStorage.setItem('key','value');

setItem()メソッドはキーと値の両方を介してlocalStorageにデータを追加するために使用されます。

キーと値の両方が文字列でなければならないことに注意してください。

キー名は重要です。後で取得できるように、何を保存しているかがわかります。

数値やオブジェクトなどの他のタイプの場合は、自動的に文字列に変換されます。

なので配列やオブジェクトをキーと値で保存するには、Array.prototype.toString()またはJSON.stringify(object)メソッドを使用して、JSON文字列として変換する必要があります。

キーと値で入力するだけで、正常に機能します。

データの取得

値をlocalStorageに保存しました。さて、どうやって値を手に入れることができますか?

とても簡単となります。

値を取得するには、getItem(key名)と入力し、キーである引数を独自のキー名に置き換える必要があります。

キーが存在しない場合は『null』を返すことに注意してください 。

const myContent = localStorage.getItem('key');

キーを指定してブラウザのlocalStorageからデータを取得するために使用されます。

データの削除

値を削除するには、removeItem()メソッドにキー名を渡す必要があります。

localStorage.removeItem('key');

これで、値がブラウザのローカルストレージから削除されます。

clearメソッド

clear()メソッドを紹介致します。

このメソッドはすべてのローカルストレージの値をクリアできます。

つまり、ドメインのストレージ全体をクリアするために使用されます。

localStorage.clear()

このメソッドの引数である設定値はありません、空で機能します。

これはローカルストレージの便利な方法の1つであり、アプリケーションのさまざまな目的に使用できます。

lengthプロパティ

キーと値のペアの数を取得するにはlengthプロパティを使用します。

localStorage.setItem('key','value');

console.log(localStorage.length); // 1

key()メソッド

localStorage内の指定されたインデックスにあるkeyを返します

const keyName = localStorage.key(index);

localStorageに追加された値ごとに整数インデックスを作成します。

for (let i = 0; i < localStorage.length; i++) {
    let storageValue = localStorage.key(i);

    console.log(`Item at ${ i }: ${storageValue}`);
}

lengthで作成されたすべてのインデックスを反復処理し、LocalStorageに保存したすべてのキーを出力します。

getItem()で、保存されているすべてのデータを取得可能です。

これはループ内の反復に基づいてキーをフェッチする場合に非常に便利です。

ローカルストレージを使用する

このプロジェクトでは、入力フィールドにユーザーが入力したらそれを取得し、ローカルストレージに保存します。

以前のWeb storageについての記事で紹介しました下記を解説付きで実装致します。

See the Pen JSのlocalStorage by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.


それではHTMLを下記のように用意します。

<h2>JavaScript localStorage Project</h2>

<textarea id="myTextarea" rows="10" cols="50"></textarea><p></p>

<button onclick="localSave()">Save</button>
<button onclick="localLoad()">Load</button>
<button onclick="localRemove()">Remove</button>

3つのボタンの1つは保存用、2つ目は保存したのを呼び出す用、3つ目は保存された値の削除用です。

順番にいきます。 

ボタンタグのonclickイベントに指定した、localSave()関数を実装します。

//入力された値を保存

const localSave = () => {
const myContent = document.getElementById("myTextarea").value;
localStorage.setItem("key", myContent);

console.log(myContent)
      }

上記では入力フィールド(textarea)の値を『myContent』という変数に格納しています。

その入力された値を保存するのにsetItem()を使用します。

ブラウザでは、文字を入力して(Save)保存ボタンをクリックすると、ブラウザのローカルストレージに文字列が保存されます。

これを確認するには、『Ctrl + Shift + I』のショーカットキーで、Applicationに移動する必要があります。

表示されていない方は、>>>で隠れている可能性があります。

localStorageのApplicationタブ

[Application]タブ -> [Storage] -> [localStorage] - >[file//ドメイン]でlocalStorageに保存された値を確認できます。

下記の画像のように、入力フィールドに文字を入力し(Save)すると、localStorageに文字列として保存されているのが確認できてると思います。

localStorageの保存

ブラウザを閉じてもう一度開くと、値がまだそこに残っていることがわかります。

つまりlocalStorage内には永続的に保存されたままです。

削除ボタン実装の前に、localStorage内に保存された値を入力フィールドにもう一度呼び出す実装をしましょう。

localLoad関数を実装します。

//保存されたデータ取得し呼び出す
const localLoad = () => {

const myContent = localStorage.getItem("key");
document.getElementById("myTextarea").value = myContent;
  
console.log(myContent)

      }

localStorageから値を取得するには、getItem(key名)を使用します。

文字をSaveしブラウザを閉じて、Loadボタンをクリックすると保存されてた値が入力フィールドに呼び出され表示されます。

では、localStorage内に保存された値は開発者がコードを使用して削除するか、ユーザーが手動で削除するまで永続的に保存されたままとなります。

期限切れはありません。

なので、削除機能を実装しましょう。

localStorage内の値を削除する方法は2つございます。

removeItem()メソッドかclear()メソッドとなります。

removeItem()を使用してみましょう。

localRemove関数を実装します、valueには空を渡してあげて下さい。

//保存されたデータを削除

const localRemove = () => {

document.getElementById("myTextarea").value = "";

localStorage.removeItem("key");

console.log("データは削除されました");

}

ユーザーが削除ボタンをクリックすると、入力フィールドとローカルストレージからもアイテムが削除されるようになります。

入力フィールドとローカルストレージ両方に値がないことがわかります。

clear()メソッドの場合は簡単です。

removeItem()を置き換えて下さい。

clear()はローカルストレージ内の全ての値を削除するために使用されます。

引数はなく、空のままで問題ありません。

localStorage.clear();

LocalStorageへのオブジェクトの保存

ここからはJavaScriptオブジェクトに既に精通している必要があります。

オブジェクトチュートリアルの復習はこちらで参照下さい。

LocalStorageは、キーと値に文字列のみを使用できます。

他のタイプのデータをlocalStorageに保存しようとすると、保存する前に自動的に文字列に変換されます。

オブジェクトは文字列ではありません。本質的に、オブジェクトはそれよりも複雑です。

これによって、JavaScriptオブジェクトを保存するときに予期しない動作が発生する可能性があります。

そちらを見てみましょう。

const person = {
    name: "Taro",
    age: 30,
    city: "Tokyo"
};

localStorage.setItem("keyProfile", person);

setItem()でオブジェクトが文字列に変換されます。

データの取得の場合はgetItem()を使用します。

console.log(localStorage.getItem("keyProfile"));

JavaScriptのオブジェクトから文字列へ変換されると、ApplicationのlocalStorageでは[object Object]が生成され取得されます。

[object Object]はオブジェクトインスタンスの文字列表現です。その値が読み取られることはありません。

それを解析する必要があるという事です。

これでは、まったく役に立っていません。

JavaScriptオブジェクトをLocalStorageに正しく格納するには、最初にオブジェクトをJSON文字列に変換する必要があります。

変換するには、組み込みJSON.stringify()関数を使用します。

その関数の結果の文字列には、JSONオブジェクトのすべてのプロパティが含まれます。

stringify()メソッドは、JavaScriptの任意のオブジェクトや値をJSON文字列に変換します。

そして、setItem()を使用し関数の出力が保存されます。

では先述のpersonを自動で文字列化された後、JSON文字列として保存してあげます。

localStorage.setItem("keyProfile", JSON.stringify(person));

このデータをオブジェクトとして取得するには、2つの事を行います。

LocalStorageから取得するために、getItem()を使用します。

そして最後にJSON文字列をJavaScriptオブジェクトに変換する必要があります。

順番にいきましょう、まずはローカルストレージからgetItem()で値を取得します。

const profileString = localStorage.getItem("keyProfile");

console.log("ローカルストレージに保存された文字列です", profileString);

// 出力: "ローカルストレージに保存された文字列です" "{'name':'Taro','age':30,'city':'Tokyo'}"

そして、LocalStorageの文字列をJSON.parse()でオブジェクトに変換し、ブラウザのコンソールに出力します。

JSON.parse()メソッドは文字列をJSONとして解析し、JavaScriptオブジェクトまたは値に変換します。

const savePerson = JSON.parse(profileString);
console.log("object:", savePerson);

console.log("name:", savePerson.name);

//出力 {  name: "Taro", age: 30,city: "Tokyo" }

//出力 "name": "Taro"

console.logのobject

下記はローカルストレージ内になります。

localStorageのobject

データを取得するときにJSON.stringify()を使用し、JSON.parse()を使用してオブジェクトに変換します。

すべてのLocalStorage関数は同期操作です。

ですので、大量のデータを保存または取得する場合、JavaScriptでは、他のコードを実行する前にそのLocalStorage操作を完了する必要があります。

大きなJSONオブジェクトを保存すると、パフォーマンスコストが増加することに注意してください。

最後に

LocalStorageは、ブラウザで利用できるデータストアです。データは文字列のキーと値のペアとして保存され、各ドメインはそのLocalStorageにアクセスできます。

JavaScriptオブジェクトを保存するときは、保存する前に必ずJSON.stringify()でJSON文字列に正しく変換してください。

そして、JSON.parse()でオブジェクトに変換して下さい。

LocalStorageを使用する場合は、その機能は同期しているため、パフォーマンスが低下する可能性があるので、大量のデータの処理は避けてください。

最も重要なことは、機密性の高いユーザーデータを保存するためにローカルストレージを使用することはお勧めしません。

機密データは常にバックエンドに保管してください。

ですが、いくつかの目的で便利なソリューションを提供することができます。

JavaScriptローカルストレージとその使用法をマスターするには、もっと沢山の練習を必要とします。

当記事のチュートリアルを参考にしてみて下さい。

本日は以上となります。

最後までこの記事を読んで頂きありがとうございます。

プライバシーポリシー