itLinkedInPocketCopyブラウザにデータを保存する、JavaScriptで操作できる「LocalStorage(ローカルストレージ)」の使い方をまとめました。LocalStorage(ローカルストレージ)とは?LocalStorageとは、利用者が使用しているブラウザにデータを保存させる機能のことです。LocalStorageは、JavaScriptによるプログラムで簡単に保存・取り出しが出来るため、導入が容易です。利用者目線でも、前回入力した内容や設定を前もって反映させたりすることが出来るため、ユーザビリティの向上に繋がります。同様のことはCookieでも可能ですが、LocalStorageは操作がお手軽なことと、大容量のデータを保存できるため、ブラウザに保存するという点ではLocalStorageが優秀です。LocalStorageはJavaScript上でしか操作できず、CookieはPHP等のサーバーサイドでも操作できる、といった違いもあるので、用途に応じて使い分けましょう。続いて、JavaScriptにおけるLocalStorageの使い方を確認しておきましょう。LocalStorageに保存するLocalStorageにデータを保存する時は、setItem()というメソッドを使用し、キーと値を設定します。値);実際の使用例はこちら。World!」というテキストを入れて保存した形となります。同じ処理で「mytext」に別の値を入れた場合は上書きとなります。保存形式は文字列のみなので注意してください。LocalStorageからデータを取り出す(取得する)LocalStorageに保存したデータを取得したい場合は、getItemというメソッドを使用します。localStorage.getItem('mytext');LocalStorage内にデータがある場合は取得し、存在しない場合は別の値を取得する関数を用意しておくと便利です。str;}LocalStorageのデータを削除するLocalStorageに保存された、指定したキーのデータを削除するには、removeItemを使用します。localStorage.removeItem('mytext');ローカルストレージ内のデータをすべて削除する場合は、clear()と書きます。使用して、テキストをメモする機能を作ってみました。実際にボタンを操作して、LocalStorageの動きを確認してみてください。alert('内容が保存されていません。alert('保存内容を呼び出しました。alert('内容が入力されていません。alert('内容を保存しました。alert('内容が保存されていません。alert('保存内容を削除しました。');};</script>配列(オブジェクト)をLocalStorageに保存するLocalStorageに保存できる形式は文字列のみです。配列などのオブジェクト要素をLocalStorageに保存する場合は、工夫が必要です。使われる手法として、「保存時は文字列に変換し、取得時に復元する」ことで疑似的に配列などの保存も可能です。JSON.stringify(array));JSON.stringifyは、オブジェクト要素を文字列に変換できる関数です。文字列に変換することで、setItemによるLocalStorageの保存が出来ます。配列の取得(復元)元々が配列として生成されたデータをLocalStorageから取得する場合、元々の形式に戻すためにJSON.parseを使用します。);JSON.parseを使用する場合、localStorageにデータが存在していない場合エラーが起きるため、まずはデータが保存されているかをチェックしておきましょう。);}LocalStorageの保存内容をチェックするLocalStorageで保存した内容を確認は、ブラウザでも行うことが出来ます。Chromeで、LocalStorageの値を確認してみましょう。調べたい保存されたキーを選択chrome以外でも、すべてのブラウザで同様の確認が行えます。LocalStorageは、再入力の手間を減らしたり、設定内容を保持しておりなど、上手く使うことでUIの向上に繋がります。ご覧の通り簡単に実装が可能なので、用途に合わせて導入してみましょう。以上、LocalStorageの使い方をサンプルコードで解説、でした。コメントをキャンセルメールアドレスが公開されることはありません。