2022.07.16Webサービスを開発していると、前回表示した際の情報をブラウザに保持しておきたいケースがよくあります。そんな時に便利な機能が「ローカルストレージ」です。今回はこちらについて解説していきます。ユーザがページをリロードした時も、リロード前の行動を保持しておきたいんですじゃあ、ローカルストレージを使ってみようかそれって難しいですか?ううん、JavaScriptのコード2~3行で簡単に使えるよ目次ローカルストレージとは?概要クッキーとの違いは?容量の違い保存期間の違い使い方デモデモの使い方コード解説セッション登録セッション取得セッション削除まとめローカルストレージとは?概要ローカルストレージとはブラウザにデータを保存しておく技術です。使い方としては、「サイトを次回表示した際に、前回のユーザの行動を記録しておく」ということが主になります。「ショッピングサイト内で前回どの商品をチェックしたか?」をローカルストレージに保持しておけば、次回表示時に「最近チェックした商品」として表示することが可能です。クッキーとの違いは?ローカルストレージとクッキーは、「ブラウザにデータを保持する」という部分では同じです。以下のような違いがあります。容量の違いローカルストレージは5MBですが、クッキーは4KBとローカルストレージの方がかなり大きいです。保存期間の違いクッキーでは保存期間を設定できますが、ローカルストレージは、削除しない限り半永久的に保存されます。※ただし、ローカルストレージでもプログラムによって一定期間で削除することは可能です。方法については下記外部サイト様をご参照ください。CodePen.デモの使い方1果物の選択肢からひとつ選択します。2「保存する」ボタンをクリックすると、ローカルストレージにデータが保存されます3「表示する」をクリックすると、ローカルストレージのデータが表示されます。4サイトをリロードしてみてください。「前回の選択」に前回保存したデータが表示されています。※削除してからリロードすると「前回の選択」が「未選択」になります。※以降、「selectItem」はラジオボタンで選択した値を格納した変数を指します。selectItem);第一引数がローカルストレージのkey、第二引数がvalueです。指定して値を取得します。指定して値を削除します。まとめローカルストレージはブラウザに情報を保持する方法として、非常にシンプルで使いやすいです。Webサービスに様々な便利機能を設置することも可能ですので、ぜひ利用してみましょう。setTimeoutはとは以下のように、指定時間後に関数を実行す...JavaScriptユーザの承認を得て、audioの自動再生を可能にする。1homebr...JavaScriptボタンのクリックの可否を、ユーザにわかりやすく制御する【HTML・CSS・JQuery】ウェブサービスを作る際に、ボタンを設置するケースが多くあります。今回の記事では、プログラミングの基礎となる、関数について解説していきます。jQueryのattr()はHTMLの属性の取得・操作ができます。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。ホームJavaScriptmulemuleと申します。IT業界で働いて約5年になります。ウェブ製作・ツール系アプリ製作を主に行っております。exports?exports.SyntaxHighlighter=SyntaxHighlighter:nullタイトルとURLをコピーしました。