LocalStrageを使ってみた。

javascript

javascriptでデータを扱う方法、増えています。
学びなおしの過程で、今回はLocalStrageを使ってみました。

1.LocalStrageとは

これまでにも、javascriptでデータを扱う方法として、Cookieを使った方法がありました。
今回は新しく登場した、LocalStrageについてのお話です。

これまでの Cookie

サーバーサイドの言語と組み合わせて扱うイメージです。
javascript単独で扱うこともできるのですが、サーバーとの通信を裏で行うので、なんだか無駄な感じがします。
容量も小さいですが、必要十分だと思っていました。

新しい LocalStrage

名前の通り、完全にローカルで保存されます。ブラウザを閉じても残ります。
サーバーとの通信は行わず、意図的にクリアをかけない限り、半永久的に保存されます。
容量も(ブラウザによりますが)5MB程度保存できます。

控えめに言って、・・・・・すごいです!

完全にローカルに保存されるので、誤ったデータを保存してしまった場合に、修正が困難になります。
セキュリティ面でも、気を付けておくほうがよいでしょう。

また、容量が大きいからとデータをどんどん突っ込んでしまうと、ブラウザに負荷をかけてしまうことにもなりえますね。

2.使ってみよう

では、実際に使い方を確かめていきます。

保存:localStorage.setItem

localStorage.setItem('key', value);

呼び出し:localStorage.getItem

value = localStorage.getItem('key');

削除:localStorage.removeItem

localStorage.removeItem('key');

指定したキーのLocalStrage1つだけ削除します。

全削除:localStorage.clear();

localStorage.clear();

保存しているすべてのデータを削除します。

3.実行サンプル

See the Pen LocalStrageの練習 by IkaRyaku(伊加 掠) (@ryakui) on CodePen.

  • テキストボックスに入力して「保存」で、LocalStrageに保存します。
    打ち換えてもう一度「保存」をかけると、LocalStrageを書き換えます。
  • 「呼び出し」で、保存した内容のアラートを出します。
  • 「削除」で、保存した内容を消します

4.まとめ

とてもシンプルな記述でデータを保存して、取り扱うことができます。
今後の開発の幅が広がりそうですね。

今回の記事の内容で、誤りがございましたらご指摘いただけると幸いです。

タイトルとURLをコピーしました