javascriptでデータを扱う方法、増えています。
学びなおしの過程で、今回はLocalStrageを使ってみました。
１．LocalStrageとは
これまでにも、javascriptでデータを扱う方法として、Cookieを使った方法がありました。
今回は新しく登場した、LocalStrageについてのお話です。
これまでの Cookie
サーバーサイドの言語と組み合わせて扱うイメージです。
javascript単独で扱うこともできるのですが、サーバーとの通信を裏で行うので、なんだか無駄な感じがします。
容量も小さいですが、必要十分だと思っていました。
新しい LocalStrage
名前の通り、完全にローカルで保存されます。ブラウザを閉じても残ります。
サーバーとの通信は行わず、意図的にクリアをかけない限り、半永久的に保存されます。
容量も（ブラウザによりますが）5MB程度保存できます。
控えめに言って、･････すごいです！
２．使ってみよう
では、実際に使い方を確かめていきます。
保存：localStorage.setItem
localStorage.setItem('key', value);呼び出し：localStorage.getItem
value = localStorage.getItem('key');削除：localStorage.removeItem
localStorage.removeItem('key');指定したキーのLocalStrage１つだけ削除します。
全削除：localStorage.clear();
localStorage.clear();保存しているすべてのデータを削除します。
３．実行サンプル
See the Pen LocalStrageの練習 by IkaRyaku(伊加 掠) (@ryakui) on CodePen.
- テキストボックスに入力して「保存」で、LocalStrageに保存します。
打ち換えてもう一度「保存」をかけると、LocalStrageを書き換えます。 - 「呼び出し」で、保存した内容のアラートを出します。
- 「削除」で、保存した内容を消します。
４．まとめ
とてもシンプルな記述でデータを保存して、取り扱うことができます。
今後の開発の幅が広がりそうですね。
今回の記事の内容で、誤りがございましたらご指摘いただけると幸いです。
