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
Help us understand the problem. What is going on with this article?

sessionStorageをつかってみる

More than 1 year has passed since last update.

そもそも

WebStorageという仕組みがHTML5から導入されています。
WebStorageはJSを用いてブラウザにデータを保存できる、Cookieよりもカジュアルに利用可能な仕組みであります。
利用方法は2種類あって、一つがlocalStorage、もう一つが今回のsessionStorageです。
基本的な使い方は変わりませんが、ライフサイクルが異なります。

双方のライフサイクルは以下の通り。

WebStorage localStorage sessionStorage
ライフサイクル ブラウザを閉じても持続 ブラウザを開いてる間のみ

対応ブラウザ

MDN的には対応ブラウザは以下の通り。

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
localStorage 4 3.5 8 10.50 4
sessionStorage 5 2 8 10.50 4

もしくはブラウザのコンソールに下記のコードを貼り付けて確認可能です。
-> @ryo511 さんからのご指摘を反映しました(2019/01/17更新)

function storageAvailable(type) {
    try {
        var storage = window[type],
            x = '__storage_test__';
        storage.setItem(x, x);
        storage.removeItem(x);
        return true;
    }
    catch(e) {
        return e instanceof DOMException && (
            // everything except Firefox
            e.code === 22 ||
            // Firefox
            e.code === 1014 ||
            // test name field too, because code might not be present
            // everything except Firefox
            e.name === 'QuotaExceededError' ||
            // Firefox
            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
            // acknowledge QuotaExceededError only if there's something already stored
            storage.length !== 0;
    }
}

console.log(storageAvailable('localStorage'));

参考: localStorage の機能検出

使い方

sessionStorageはkeyとvalueを対に持っています。
よって保存する際はkeyとvalueを、取得・削除する際はkeyを指定して操作します。
ちなみにkeyは文字列と整数を利用できますが、値は文字列のみのようです。

保存

下記3行は全て同じ意味です。

sessionStorage.key = 'value';
sessionStorage['key'] = 'value';
sessionStorage.setItem('key', 'value');

取得

sessionStorage.getItem('key')

削除

sessionStorage.removeItem('key')

初期化

sessionStorage.clear()

まとめ

以上のようにシンプルにブラウザにデータを持たせて利用することができます。
例えばページ遷移する際に、通信はしたくないけど前のページの情報を持っていたい場合などに使えそうですね!

ikyu
「こころに贅沢を」をコンセプトに一休.com、一休レストランなどのサービスを提供しています。
https://www.ikyu.com
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