WebStorage 入門!データをブラウザに簡単保存しよう

WebStrage入門 ブラウザにデータを保存

更新日:

WebStorageはCookieと同じような感じで、サイトごとにデータを保存することが出来ます。ただ、CookieよりもWebStorageの方が容量が多いなど、利便性が高いですね!CookieとWebStorageの違いについても触れていきながら解説していきます。読み書き削除も簡単に操作できるので使えるようになりたい技術ですね!

WebStorageとCookieの主な違い

まずは、「WebStorage」と「Cookie」の主な違いについて紹介していきます。

WebStorageCookie
保存可能容量5MB4KB
保存期間永久もしくはセッションごと指定期間
(永久は不可)
サーバーでの操作基本不可能
(POSTする必要がある)
可能
サーバーへの通信なしデータ取得・保存ごとに通信

ざっくりとこんな感じになります~

他にも、CookieだとJSでメソッドが用意されていなかったりするので取得・保存が面倒だったりしますね~

WebStorageの種類

まずは、WebStorageの種類を把握しておきましょう。

WebStorageには「localStorage」と「sessionStorage」の2種類があります。

「localStorage」は意図的に削除しない限り、データはブラウザのストレージに残り続けます。

「sessionStorage」は同一セッションであれば残り続けます。つまり、ブラウザを閉じるとデータは削除されます。

WebStorageの書き出し

最初はデータの書き出しを行います。

WebStorageはCookieと同じく、ValueとKeyを組合わせて保存します。

※keyは"id" valueは"ABCD"としておきます


// 以下3つは同じ意味になります。どれか好きな方法で書き出し出来ます!
localStorage.setItem('id', 'ABCD');
localStorage.id = 'ABCD';
localStorage['id'] = 'ABCD';


// sessionStorageはこちらになります
sessionStorage.setItem('id', 'ABCD');
sessionStorage.id = 'ABCD';
sessionStorage['id'] = 'ABCD';

ちなみにCookieは


document.cookie = "id=ABCD";

になります。

たいして変わらないですねw

WebStorageの読み込み

次に、読み込みを行います。

先ほどのidを読み込みましょう!


// 以下3つは同じ意味になります。どれか好きな方法で書き出し出来ます!
var data = localStorage.getItem('id');
var data = localStorage.id;
var data = localStorage['id'];

// sessionStorageはこちらになります
var data = sessionStorage.getItem('id');
var data = sessionStorage.id;
var data = sessionStorage['id'];

これをCookieでやると...


var data= document.cookie.replace(/(?:(?:^|.*;\s*)id\s*\=\s*([^;]*).*$)|^.*$/, "$1");

は?意味わかんねwww

もしくはスプリットしてfor文回したり。。

WebStorageマジ神!!

WebStorageの削除

今度はデータを削除していきましょう!


// 以下3つは同じ意味になります。どれか好きな方法で書き出し出来ます!
localStorage.removeItem('id');
delete localStorage.id;
delete localStorage['id'];

// sessionStorageはこちらになります
sessionStorage.removeItem('id');
delete sessionStorage.id;
delete sessionStorage['id'];

これをCookieでやると...


document.cookie = "id=; max-age=0";

そんなに~変わらないかな?^^;

WebStorageの一括削除

次は一括削除になります!


localStorage.clear();

sessionStorage.clear();

Cookieの方は...たぶんできない??

WebStorageのデータ数

今度はデータ数を取得してみます!


localStorage.length

sessionStorage.length

簡潔で素晴らしい!!

WebStorageのイベント

最後にイベントを紹介していきます!

WebStorageにデータの追加・削除・更新などがあった場合、イベントハンドラが発火するように設定できます。

例えば、別タブで同じサイトを開いている際に片方が更新されたのでもう片方を更新する。みたいなことが出来ます。

書き方としては以下のようになります。


window.addEventListener("storage", function (event) {
  // ここにコードを書く
});

この時、以下の属性が使えるようになります。

属性名返り値
event.key更新されたキー
event.oldValue更新されたキーの古い値
event.newValue更新されたキーの新しい値
event.url更新されたページのURL
event.storageArea更新によって影響を受けたstorageオブジェクト

となります!

みなさんもぜひWebStorage使ってくださいね~

最後までありがとうございました!!

Copyright© カノトのアトリエ , 2019 All Rights Reserved Powered by STINGER.