クルーデザイン

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で文字サイズの大きさを変更するボタンを作ってみようと思います。 行政のサイトで良く見かけますよね。 これもjQueryで簡単に実現できます。 昔からある機能なので古いイメージがありますが、 …

jQuery 絞り込み検索サンプル(正規表現)

jQueryを利用すれば、絞り込み検索機能も簡単に作成できます。 絞り込み検索機能とは、テキストボックスに入力した値とマッチするものを表示・マッチしないものを非表示にするような機能です。 以下のような …

jQuery CSSクラスの追加と削除

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

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

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

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

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


comment

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