1. ホーム
  2. Web制作
  3. html5

localStorageの最大記憶容量を取得する方法を説明する

2022-01-12 18:15:59

localStorage、sessionStorage、cookieについて簡単に紹介します。

localStorage: サーバー通信に関与しないクライアント側でのみ保存され、保存サイズは通常5M、人間が消去しなければブラウザを閉じても常に存在する。

sessionStorage: クライアントサイドのストレージのみ、サーバー通信に関与しない、ストレージサイズは通常5M、セッションレベルのストレージ、つまり、現在のページまたはブラウザを閉じるとクリアされます。

クッキー:クライアント側ストレージ、サーバー通信に参加、ストレージサイズは4k、ライフサイクルを設定可能、設定したライフサイクルの間有効

(function() {
    if(!window.localStorage) {
        console.log('The current browser does not support localStorage!')
    }    
    var test = '0123456789';
    var add = function(num) {
        num += num;
        if(num.length == 10240) {
            test = num;
            return;
        }
        add(num);
    }
    add(test);
    var sum = test;
    var show = setInterval(function(){
        sum += test;
        try {
            window.localStorage.removeItem('test');
            window.localStorage.setItem('test', sum);
            console.log(sum.length / 1024 + 'KB');
        } catch(e) {
            alert(sum.length / 1024 + 'KB out of max limit');
            clearInterval(show);
        }
    }, 0.1)
})()


上記のメソッドをブラウザのコンソールで直接実行します。

ChromeのlocalStorageのハンズオンテストでは、最大で5120kb、つまり5Mになりました。

localStorageの最大保存サイズを取得する方法については、この記事にまとめています。localStorageの詳細については、過去の記事を検索していただくか、引き続き以下の記事を閲覧してください。