【JavaScript 】ローカルストレージにデータ保存する方法

ローカルストレージ（LocalStorage）というのは、Webページで取り扱うデータをブラウザに保存する仕組みのことをいいます。HTML5から登場したもので、ブラウザを開いたり閉じたりをしても、データが保存され続けるのが特徴です。

ローカルストレージはJavaScriptを使用して、簡単にデータを保存・取得・削除できます。ローカルストレージのデータを扱うサンプルプログラムについて解説したいと思います。

ローカルストレージとCookie（クッキー）の違いは？

ローカルのブラウザにデータを保存する方法としてCookie（クッキー）もありますが、ローカルストレージは何が違うのでしょうか。

まずは扱うことのできる容量に差があります。Cookie（クッキー）は一時的なデータ保存に使用され、保存期間が制限されています。また、データ容量は約4 KBしかありません。

これに対し、ローカルストレージは、ブラウザ内にデータを永続的に保存できるメカニズムです。データ容量は約5 MBまで許容されます。

さらにCookie（クッキー）はPHPなどのサーバー側のプログラムで扱われるのに対して、ローカルストレージはクライアント側で実行されるプログラムであるJavascriptで扱われます。

それではローカルストレージにデータを保存するJavaScriptのサンプルプログラムを見ていきましょう。

localStorage.setItem('mykey1', 'Hello, World!');

ローカルストレージにデータを保存には、JavaScriptのlocalStorage.setItem メソッドを使用します。

localStorage.setItem(‘キー’, ‘値’);

第一引数は、データを取り出すときなどに使用する「キー」で、値は第二引数に指定します。サンプルでは「mykey1」というキーで「Hello, World!」という文字列を保存しております。

ローカルストレージに保存したデータを取得するJavaScriptのプログラムについて解説します。

localStorage.setItem('mykey1', 'Hello, World!');
var hoge = localStorage.getItem('mykey1');
console.log(hoge);

実行結果：

Hello, World!

それでは、このJavaScriptのプログラムについて解説します。

localStorage.setItem(‘mykey1’, ‘Hello, World!’);

前述のプログラムでも登場しましたが、「mykey1」というキーで「Hello, World!」という文字列をローカルストレージに保存しております。

var hoge = localStorage.getItem(‘mykey1’);

ローカルストレージから「mykey1」というキーのデータを取得して、変数「hoge」に格納しております。上記で設定した「Hello, World!」という文字列が取得されます。

console.log(hoge);

変数「hoge」の内容を表示しております。

ローカルストレージに保存したデータを削除するJavaScriptのプログラムについて解説します。

localStorage.setItem('mykey1', 'Hello, World!');
localStorage.removeItem('mykey1');

var hoge = localStorage.getItem('mykey1');
console.log(hoge);

実行結果：

さきほどのプログラムとほぼ同じですが、次の部分が追加されております。

localStorage.removeItem(‘mykey1’);

localStorage.removeItemというメソッドを使用しておりますが、ローカルストレージに保存されているキー「mykey1」のデータを削除しております。

localStorage.removeItem(‘キー’);

localStorage.removeItem メソッドは「キー」に指定したローカルストレージのデータを削除します。

ローカルストレージ（LocalStorage）を使うJavascriptのプログラムについて解説してきましたが、いかがでしたでしょうか。

ローカルストレージはCookie（クッキー）と同様にクライアント側のブラウザにデータが保存されますが、扱えるデータの容量などに差がありましたね。