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

WebStorage 入門

More than 3 years have passed since last update.

WebStorage 入門

概要

Electronやハイブリットアプリ開発の際に、ローカルにデータを持たしたいと思い再入門しました。
ざっくりいうと、WebStorageとはブラウザにデータを保存しておく為の仕組みです。
Cookieよりも高機能です。(永続的なデータ保存・ストレージ容量が4MB)

注意点

ブラウザにより使えない場合がある。
最新のブラウザなら基本なんでも大丈夫です。
(IE8以上なら大丈夫。)

ルール

同一オリジンでデータを保存します。

オリジンとは

URLっぽいものの事。

http://(スキーム)localhost(ホスト):8000(ポート) = オリジン

同じ端末(ブラウザ)で同じオリジンなら同じWebStorageが使える。

WebStorageの種類

sessionStorage

タブが閉じられるまで有効。
タブが複数でも異なるStorageになる。

keyとvalueで保存される。

メソッド

Method Description
sessionStorage.setItem(key, value) sessionStorageにデータを保存する。
sessionStorage.getItem(key) sessionStorageのデータを取得する。
sessionStorage.removeItem(key) sessionStorageのデータを削除する。
sessionStorage.clear() sessionStorageのデータを全件削除する。
sessionStorage.length sessionStorageのkey数を返す。

localStorage

ブラウザ自体にずっと保存。
複数タブでも有効。
(基本localStorageを使うのがベターです。)

Method Description
localStorage.setItem(key, value) localStorageにデータを保存する。
localStorage.getItem(key) localStorageのデータを取得する。
localStorage.removeItem(key) localStorageのデータを削除する。
localStorage.clear() localStorageのデータを全件削除する。
localStorage.length localStorageのkey数を返す。

オブジェクトを保存する

key, valueのvalueをオブジェクトにしたい事があるかと思います。
その際は、JSON.stringify(value)とJSON.parse(key)を使います。

setItem時

JSON.stringify(value)

getItem時

JSON.parse(key)

イベント

複数タブなどを開いている場合に、データの整合性を取るイベントがあります。
storageに何らかの変更があったらイベントをキャッチします。

  localStorage.setItem('name', 'jack');
  window.addEventListener('storage', (e) => {
    console.log(e.key); // key
    console.log(e.oldValue); //古い値
    console.log(e.newValue); //変更後の値
    console.log(e.storageArea); //変化があった時の、storageのデータ全体をオブジェクトで取得
    console.log(e.url); //オリジン
  });

終わり

WebStorageを使えば、簡単に端末(ブラウザ)毎にデータを残す事ができます。
てっとり早くデータを保存したい時や、ローカル端末にデータを残したい時などにはうってつけです。
セキュリティ的な観点では、もう少し調査が必要なので、次回はそちらの調査結果を書こうと思います。

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした