Help us understand the problem. What is going on with this article?

WebStorage API(LocalStorage)を使ってみた

More than 3 years have passed since last update.

WebStorage APIってなに?

ユーザのローカル(ブラウザ?)にデータを保存するための仕組み。
ローカルで扱えるデータベースを思っていただければ良いかなと。
データの保存・上書き・削除・全クリアなどの操作は、JavaScriptで行う。

クッキーとの違いは?

  • 有効期限なく永続的に利用できる
  • 5MBまで利用できる(クッキーは4KBまで)
  • 必要時に利用できる(クッキーはサーバーアクセス時に自動送信)

基礎知識

  • 基本は key value のペアで保存
  • ドメイン&ブラウザごとに格納される
  • モバイルでも使える
  • 値は必ず 文字列 で保存される

サンプル用のファイルを作ってみた

まあ使って見る前に簡単にサンプル用のソース書いたので、コピペして使ってください。

index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>WebStrage API</title>
<script type="text/javascript">
  function init() {
  }
</script>
</head>
<body onload="init()">
  <div id="result"></div>
</body>
</html>

以下から、上記の function init() {} 内にwebStrageの操作のためのソースを書いていきます。

データを追加してみる setItem(key, value)

Artistic という値を持った Hashikawa を追加してみましょう。

function init() {
  localStorage.Hashikawa = "Artistic";
  localStorage["Hashikawa"] = "Artistic";
  localStorage.setItem("Hashikawa", "Artistic");
  //上記3行、どの書き方でも同じ
}

index.html を読み込むとデータが追加される。はず。
って、データを追加したのはいいけど、確認のしようがないねorz

データを抽出&表示してみる getItem(key)

上記で追加したデータを抽出してみよう。

function init() {
  ・・・・・
  var val = localStorage.Hashikawa;
  var val = localStorage["Hashikawa"];
  var val = localStorage.getItem("Hashikawa");
  // 上記3行、どの書き方でも同じ
  document.querySelector("#result").innerHTML = val;
}

Artistic という値が表示される。

データを削除してみる removeItem(key)

削除は localStorage.removeItem(key) でできる。
上記で書いた var val = localStorage.Hashikawa; の上に、以下を追記してみよう。

function init() {
  ・・・・・
  localStorage.removeItem("Hashikawa");  

  var val = localStorage.Hashikawa;
 ・・・・・
}

ページをリロードすると、先ほど表示された Artistic が今度は表示されなくなるか、undefined を返します。

全てのデータを削除する clear()

localStorageに保存されているすべてのデータを削除するには clear() を使う。

まずはいくつかデータを追加してみよう。

function init() {
  localStorage.setItem("A", "Aだよ");  
  localStorage.setItem("B", "Bだよ");  
  localStorage.setItem("C", "Cだよ");  
  localStorage.setItem("D", "Dだよ");  
  localStorage.setItem("E", "Eだよ");  

  var val = localStorage.getItem("A") + " " +
            localStorage.getItem("B") + " " +
            localStorage.getItem("C") + " " +
            localStorage.getItem("D") + " " +
            localStorage.getItem("E");

  document.querySelector("#result").innerHTML = val;
}

これを実行すると、
Aだよ Bだよ Cだよ Dだよ Eだよ
こう表示されますね。

では、ひとまず、removeItem() で一個だけ削除してみましょう。

function init() {
  ・・・・・  
  localStorage.setItem("E", "Eだよ");  

  localStorage.removeItem("B");
  ・・・・・
}

これを実行すると、
Aだよ null Cだよ Dだよ Eだよ
こうなります。
Bがないので、 null を返されました。

次に、 clear() を使って、全部削除してみましょう。

function init() {
  ・・・・・  
  localStorage.setItem("E", "Eだよ");  

  localStorage.clear();
  ・・・・・
}

すると、
null null null null null
全部 null になっちゃった!

ということで、全部削除できました。

これがWebStrage APIです。

SessionStorageっていうのもある

localStrage の他に、 sessionStorage というAPIもあります。
使い方は localStrage と一緒。

名前からもわかる通り、
sessionStorage = 同セッションのみで使用できる
localStorage = セッションが切れても保持し続ける

と言った違いがあります。

もっとデータベースライクに使いたい人はこちら

キー、バリューじゃ物足りないよ!
という人は、JSON使ってもっとデータベースライクに使えます。

以下の記事参照
LocalStorageをもっとデータベースライクに使う方法

masamitsu-konya
転職サイトGreenとTalentBaseのWebデザイナー&フロントエンドエンジニア。 バックエンドもマスターしたれぃ、と勉強中。
http://www.green-japan.com
atrae
People Techカンパニーとして、転職サイトGreen, ビジネスマッチングアプリyenta, 組織改善プラットフォームwevoxなどのサービスを運営。全ての社員が誇りを持てる組織と事業の創造にこだわり、関わる人々がファンとして応援したくなるような魅力ある会社であり続けることを目指しています。
https://atrae.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away