LoginSignup
139

More than 5 years have passed since last update.

WebStorage API(LocalStorage)を使ってみた

Last updated at Posted at 2014-04-22

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をもっとデータベースライクに使う方法

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
139