Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
72
Help us understand the problem. What is going on with this article?
@tfrcm

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

72
Help us understand the problem. What is going on with this article?
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
tfrcm
GemcookでCEO兼エンジニアしてます!

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
72
Help us understand the problem. What is going on with this article?