ブラウザごとに値を保存しておくことができるローカルストレージについて学びたいと思います。
ブラウザの機能として提供されているものなので、特別なものは不要です。
クッキーとは少し違い、保存の有効期限などは無く保存するデータもより多く扱えます。
プラグインなどを利用すると、変数だけでは無くオブジェクトを保存することもできるようですね。
1つサンプルを作成したので、そのサンプルに沿って説明したいと思います。
作ったサンプルも見てくださいね。
サンプルの内容
「保存」ボタンをクリックするとテキストボックスの内容をローカルストレージに保存します。
また、画面表示時にローカルストレージから保存されたテキストボックスの内容を取り出し、テキストボックスに設定します。
ローカルストレージの読み書きはスクリプトを使っておこないます。
HTML側
スクリプト側を簡単にするためにjQueryを参照します。
基本的に「テキストボックス」と「保存ボタン」があればOKです。
スクリプト側で操作しやすいようにクラスを付けておきましょう。
|
1 2 3 4 5 6 7 8 9 10 11 |
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <div class="container"> <p class="title">ローカルストレージサンプル</p> <div class="row"> <div class="col"> <input class="value-1" type="text" /> <button class="btn-sm save-btn">保存</button> <p class="status"></p> </div> </div> </div> |
スクリプト側
ローカルストレージへの読み込みと書き込みはスクリプトでおこないます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$(function(){ // ローカルストレージへの書き込み関数 function setLocalStorage(key, value) { localStorage.setItem(key, value); } // ローカルストレージからの読み込み関数 function getLocalStorage(key) { return localStorage.getItem(key); } // 初期表示時に前回保存された値を読み込んでセット $(".value-1").val(getLocalStorage("value-1")); // 保存ボタンクリック時の処理 $(".save-btn").click(function(){ setLocalStorage("value-1", $(".value-1").val()); $(".status").text("ローカルストレージに保存しました"); }); }); |
[ 3〜5行目 ]
「setLocalStorage」という自作関数を定義しています。
ローカルストレージの操作は「localStorage」というオブジェクトを使っておこないます。
ローカルストレージオブジェクトの「setItem」という関数を使って値の保存が可能です。
[ 8〜10行目 ]
「getLocalStorage」という自作関数を定義しています。
指定した「キー」に該当する「値」を返します。
[ 13行目 ]
ローカルストレージに保存されている値を取得して、テキストボックスに表示します。
[ 16〜19行目 ]
保存ボタンがクリックされた時に実行されます。
「setLocalStorage関数」に「value-1」というキーとテキストボックスに入力されている内容を渡しています。
これによってローカルストレージに「value-1というキー名でテキストボックスに入力されている内容」が保存されます。
何か値を入力してから保存ボタンを押し、画面をリロードしてみてください。
入力した値が初めからセットされていると思います。
今回は入力された値を保存して読み込むという処理でしたが、工夫しだいで色々と便利なサイトにできると思います。
是非、色々と試してみてくださいね。
サンプルも作りましたので参考にしてください。
