クルーデザイン

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 ブロックレベル要素をリンクにしたい(aタグで囲まない)

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

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

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

jQuery CSSクラスの追加と削除

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

jQuery テキストボックスのフォーカス時にテキストを全選択

サイトのUI(ユーザーインターフェイス)向上のためにテキストボックスがフォーカスされた時に、テキストボックスの内容を選択済みにして内容を変更しやすくしたい場合があります。 バックスペースで1文字ずつ削 …

jQuery 選択した画像への差し替え

jQueryは一番有名なJavaScriptのライブラリです。 jQueryのおかげで簡単にJavaScriptを利用できるようになりましたね。 他のライブラリも多く出てきましたが、まだまだ使う機会も …


comment

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