クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

jQuery

jQuery ローカルストレージ で入力値の保存と読み込みをする

投稿日:2017年11月30日 更新日:

ブラウザごとに値を保存しておくことができるローカルストレージについて学びたいと思います。
ブラウザの機能として提供されているものなので、特別なものは不要です。
クッキーとは少し違い、保存の有効期限などは無く保存するデータもより多く扱えます。
プラグインなどを利用すると、変数だけでは無くオブジェクトを保存することもできるようですね。

1つサンプルを作成したので、そのサンプルに沿って説明したいと思います。
作ったサンプルも見てくださいね。

サンプルの内容

「保存」ボタンをクリックするとテキストボックスの内容をローカルストレージに保存します。
また、画面表示時にローカルストレージから保存されたテキストボックスの内容を取り出し、テキストボックスに設定します。

ローカルストレージの読み書きはスクリプトを使っておこないます。

HTML側

スクリプト側を簡単にするためにjQueryを参照します。
基本的に「テキストボックス」と「保存ボタン」があればOKです。
スクリプト側で操作しやすいようにクラスを付けておきましょう。

スクリプト側

ローカルストレージへの読み込みと書き込みはスクリプトでおこないます。

[ 3〜5行目 ]
「setLocalStorage」という自作関数を定義しています。
ローカルストレージの操作は「localStorage」というオブジェクトを使っておこないます。
ローカルストレージオブジェクトの「setItem」という関数を使って値の保存が可能です。

[ 8〜10行目 ]
「getLocalStorage」という自作関数を定義しています。
指定した「キー」に該当する「値」を返します。

[ 13行目 ]
ローカルストレージに保存されている値を取得して、テキストボックスに表示します。

[ 16〜19行目 ]
保存ボタンがクリックされた時に実行されます。
「setLocalStorage関数」に「value-1」というキーとテキストボックスに入力されている内容を渡しています。
これによってローカルストレージに「value-1というキー名でテキストボックスに入力されている内容」が保存されます。

何か値を入力してから保存ボタンを押し、画面をリロードしてみてください。
入力した値が初めからセットされていると思います。
今回は入力された値を保存して読み込むという処理でしたが、工夫しだいで色々と便利なサイトにできると思います。
是非、色々と試してみてくださいね。

サンプルも作りましたので参考にしてください。

-jQuery

執筆者:

関連記事

jQuery ページの最上部へスクロールする処理(サンプル付き)

よく見かける「トップへ戻る」を作ってみます。 ホームページをいくらかスクロールしていくと、右下に出てくきて、ずっと付いてくるやつですね。 それをクリックすると、ページの最上部まで「ぎゅいーん」とスクロ …

jQuery CSSクラスの追加と削除

jQueryを使うとHTMLやCSSだけでは実現できないような動きをサイトに付けることができます。 今回は例としてボタンクリックされた時に「CSSのクラスを追加」もう一度クリックすると「CSSクラスを …

jQuery クラスの追加・クラスの削除 クリックで色が付くメニュー(addClass・removeClass)

jQueryを使えば、タグにクラスを追加したり削除したりすることが簡単にできます。 今回はクリックされた「li」にクラスを追加して、クリックで色が付くメニューを作成してみようと思います。 こんなイメー …

jQuery ブロックレベル要素をリンクにしたい(aタグで囲まない)

インライン要素をブロックレベル要素で囲ってはいけないというHTMLの文法規約があります。 そのため、divで作ったグローバルメニューなどをaタグで囲むことができません。 ※実際は動作する場合もあります …

jQuery プラグインlazyload.js(画像の遅延読み込み)

スクロールすると画像がふわっと表示されるようなサイトを良く見ますよね。 あれは画像の遅延読み込みという事をしているそうです。 ページロード時にでは無く、スクロールで特定の位置に来た時に初めて画像を読み …


comment

メールアドレスが公開されることはありません。