Web Storage API

2020.09.29

JavaScript

HTML5から導入されたWeb Storage APIは、Cookieよりも直感的に動作するブラウザ内でのキーと値の保存機能です。
データの保存、上書き、削除、クリアなどの操作は、JavaScriptで行うことができます。

Web Storage APIの種類

Web Storage APIには「sessionStorage」と「localStorage」の2種類のストレージがあります。

sessionStorage

「sessionStorage」はセッションデータのみを保存するストレージです。
データはブラウザまたはタブが閉じられるまで保持されます。
また、データはサーバに転送されることはありません。

localStorage

「localStorage」は有効期限なしでデータを保存するストレージです。
JavaScriptを使用してデータをクリアすることもできます。

Web Storage APIの使い方

保存

sessionStorage.setItem('hoge', 'active');

取得

sessionStorage.getItem('hoge');

削除

sessionStorage.removeItem('hoge');

クリア

sessionStorage.clear('hoge')

サンプル

以下は、訪問したaタグに「is-visited」クラスを付与するサンプルです。
CSSでは:visited疑似クラスに対して指定できるスタイルは制限されていますが、localStorageを使用してクラスを付与する方法では、全てのスタイルや疑似要素にもスタイルを適用することができます。

このサンプルでは、aタグのhref属性がルートからのパスであることを前提とし、
ページを訪れると、window.location.pathnameをもとにlocalStorageに保存しています。
判定では、aタグのhrefがlocalStorageに保存されているかどうかを確認しています。

const visitedPage = {
    target : document.querySelectorAll('a'),
    storageName: 'page-',
    init : function(){
        const _this = this;

        /* ---------- check & count ---------- */
        window.addEventListener('DOMContentLoaded',function(){
            _this.check();
            _this.active();
        });
    },
    check: function(){
        const _this = this;

        for ( let i = 0; i < _this.target.length; i++ ) {
            const href = _this.target[i].getAttribute('href');

            if( localStorage.getItem( _this.storageName + href ) ){
                _this.target[i].classList.add('is-visited');
            }
        }
    },
    active: function(){
        const _this = this;

        const page_url = window.location.pathname;
        localStorage.setItem( _this.storageName + page_url , 'active');
    }
}
visitedPage.init();