LocalStorage値の最大サイズはいくつですか？
localStorageは（現在）文字列のみを値としてサポートしているため、オブジェクトを格納する前に文字列化（JSON-stringとして格納）する必要があるため、値の長さに関して明確な制限があります。
すべてのブラウザに当てはまる定義があるかどうか誰かが知っていますか？
Web Storageに関する ウィキペディアの記事からの引用 ：
ウェブストレージは単純にCookieの改善と見なすことができ、はるかに大きなストレージ容量を提供します（ Google ChromeではOriginあたり10 MB（ https://plus.google.com/u/0/+FrancoisBeaufort/posts/）。 S5Q9HqDB8bh ）、Mozilla Firefox、およびOpera; Internet Explorerの記憶領域あたり10 MB ）およびより優れたプログラムインターフェイス。
また、 John Resigの記事から引用している [2007年1月に投稿]：
記憶域スペース
DOM Storageを使うと、Cookieに課される一般的なユーザーエージェントの制限よりもはるかに多くの記憶領域があることが暗示されます。しかしながら、提供される量は仕様で定義されていません、そしてそれはユーザーエージェントによって有意義に放送されてもいません。
Mozillaのソースコードを見ると、5120KBがドメイン全体のデフォルトのストレージサイズであることがわかります。これは典型的な2KBクッキーよりもかなり多くの作業スペースを提供します。
しかし、この記憶領域のサイズはユーザーがカスタマイズできます （5MBの記憶領域は保証されていませんし、暗示もされていません）そしてユーザーエージェント（例えばOperaは3MBしか提供できません - ）しかし時間だけが教えてくれるでしょう。）
実際Operaは5MBの制限を持っていません。アプリケーションがさらに必要とするとき、それは限界を増やすことを申し出ます。ユーザーはドメインに対して「無制限のストレージ」を選択することもできます。
あなたは簡単に localStorageの制限/クォータをテストすることができます あなた自身。
これは、制限を見つけるための簡単なスクリプトです。
if (localStorage && !localStorage.getItem('size')) {
var i = 0;
try {
// Test up to 10 MB
for (i = 250; i <= 10000; i += 250) {
localStorage.setItem('test', new Array((i * 1024) + 1).join('a'));
}
} catch (e) {
localStorage.removeItem('test');
localStorage.setItem('size', i - 250);
}
}
これが 要旨 、 JSFiddle および ブログ投稿 です。
スクリプトは、ブラウザがスローして例外が発生するまで、ますます大きくなるテキストの設定をテストします。その時点で、テストデータを消去し、サイズをキロバイト単位で格納するlocalStorageにサイズキーを設定します。
localStorageに格納できる単一の文字列の最大長を探します
このスニペットは、ドメインごとにlocalStorageに格納できるStringの最大長を見つけます。
//Clear localStorage
for (var item in localStorage) delete localStorage[item];
window.result = window.result || document.getElementById('result');
result.textContent = 'Test running…';
//Start test
//Defer running so DOM can be updated with "test running" message
setTimeout(function () {
//Variables
var low = 0,
high = 2e9,
half;
//Two billion may be a little low as a starting point, so increase if necessary
while (canStore(high)) high *= 2;
//Keep refining until low and high are equal
while (low !== high) {
half = Math.floor((high - low) / 2 + low);
//Check if we can't scale down any further
if (low === half || high === half) {
console.info(low, high, half);
//Set low to the maximum possible amount that can be stored
low = canStore(high) ? high : low;
high = low;
break;
}
//Check if the maximum storage is no higher than half
if (storageMaxBetween(low, half)) {
high = half;
//The only other possibility is that it's higher than half but not higher than "high"
} else {
low = half + 1;
}
}
//Show the result we found!
result.innerHTML = 'The maximum length of a string that can be stored in localStorage is <strong>' + low + '</strong> characters.';
//Functions
function canStore(strLen) {
try {
delete localStorage.foo;
localStorage.foo = Array(strLen + 1).join('A');
return true;
} catch (ex) {
return false;
}
}
function storageMaxBetween(low, high) {
return canStore(low) && !canStore(high);
}
}, 0);
<h1>LocalStorage single value max length test</h1>
<div id='result'>Please enable JavaScript</div>
JavaScriptでは文字列の長さが制限されています。 1つの文字列に限定されていないのにlocalStorageに格納できるデータの最大量を表示したい場合は、 この答えのコードを使用できます 。
編集： スタックスニペットはlocalStorageをサポートしていないので、 ここにJSFiddleへのリンクがあります 。
結果
Chrome（45.0.2454.101）： 5242878文字
Firefox（40.0.1）： 5242883文字
Internet Explorer（11.0.9600.18036） ： 16386122066 122070文字
Internet Explorerで実行するたびに結果が異なります。
5MBが利用可能であると仮定しないでください - localStorage容量はブラウザによって異なります、2.5MB、5MBおよび無制限は最も一般的な値です。出典： http://dev-test.nemikor.com/web-storage/support-test/
モバイルブラウザ
Browser | Chrome | Android Browser | Firefox | iOS Safari
Version | 40 | 4.3 | 34 | 6-8
Available | 10MB | 2MB | 10MB | 5MB
デスクトップブラウザ
Browser | Chrome | Opera | Firefox | Safari | IE
Version | 40 | 27 | 34 | 6-8 | 9-11
Available | 10MB | 10MB | 10MB | 5MB | 10MB
ラージオブジェクトを単一のlocalStorageエントリに文字列化したくないのです。これは非常に非効率的です。細部が少し変更されるたびに、全体を解析して再エンコードする必要があります。また、JSONは1つのオブジェクト構造内で複数の相互参照を処理することができず、多くの詳細を消去します。コンストラクタ、配列の非数値プロパティ、スパースエントリの内容など.
代わりに、 Rhaboo を使用できます。たくさんのlocalStorageエントリを使って大きなオブジェクトを格納するので、小さな変更を素早く行うことができます。復元されたオブジェクトは保存されたものをはるかに正確にコピーしたもので、APIは非常に単純です。例えば。：
var store = Rhaboo.persistent('Some name');
store.write('count', store.count ? store.count+1 : 1);
store.write('somethingfancy', {
one: ['man', 'went'],
2: 'mow',
went: [ 2, { mow: ['a', 'meadow' ] }, {} ]
});
store.somethingfancy.went[1].mow.write(1, 'lawn');
ところで、私はそれを書いた。
cdmckay's answer が大好きですが、リアルタイムでサイズをチェックするのはあまり良くありません。遅すぎる（私にとっては2秒）。これは改善されたバージョンであり、エラーの大きさを選択することもできます（デフォルトは250,000、エラーが小さいほど - 計算は長くなります）。
function getLocalStorageMaxSize(error) {
if (localStorage) {
var max = 10 * 1024 * 1024,
i = 64,
string1024 = '',
string = '',
// generate a random key
testKey = 'size-test-' + Math.random().toString(),
minimalFound = 0,
error = error || 25e4;
// fill a string with 1024 symbols / bytes
while (i--) string1024 += 1e16;
i = max / 1024;
// fill a string with 'max' amount of symbols / bytes
while (i--) string += string1024;
i = max;
// binary search implementation
while (i > 1) {
try {
localStorage.setItem(testKey, string.substr(0, i));
localStorage.removeItem(testKey);
if (minimalFound < i - error) {
minimalFound = i;
i = i * 1.5;
}
else break;
} catch (e) {
localStorage.removeItem(testKey);
i = minimalFound + (i - minimalFound) / 2;
}
}
return minimalFound;
}
}
テストする：
console.log(getLocalStorageMaxSize()); // takes .3s
console.log(getLocalStorageMaxSize(.1)); // takes 2s, but way more exact
これは標準エラーに対して劇的に速く動作します。また必要ならばもっと正確にすることもできます。
現代のブラウザで以下のコードを使用すると、リアルタイムで効率的にストレージクォータ（合計と使用済み）をチェックできます。
if ('storage' in navigator && 'estimate' in navigator.storage) {
navigator.storage.estimate()
.then(estimate => {
console.log("Usage (in Bytes): ", estimate.usage,
", Total Quota (in Bytes): ", estimate.quota);
});
}
私は次のことをやっています：
getLocalStorageSizeLimit = function () {
var maxLength = Math.pow(2,24);
var preLength = 0;
var hugeString = "0";
var testString;
var keyName = "testingLengthKey";
//2^24 = 16777216 should be enough to all browsers
testString = (new Array(Math.pow(2, 24))).join("X");
while (maxLength !== preLength) {
try {
localStorage.setItem(keyName, testString);
preLength = testString.length;
maxLength = Math.ceil(preLength + ((hugeString.length - preLength) / 2));
testString = hugeString.substr(0, maxLength);
} catch (e) {
hugeString = testString;
maxLength = Math.floor(testString.length - (testString.length - preLength) / 2);
testString = hugeString.substr(0, maxLength);
}
}
localStorage.removeItem(keyName);
maxLength = JSON.stringify(this.storageObject).length + maxLength + keyName.length - 2;
return maxLength;
};
私は私が使用するこの関数にバイナリテストを凝縮しました：
function getStorageTotalSize(upperLimit/*in bytes*/) {
var store = localStorage, testkey = "$_test"; // (NOTE: Test key is part of the storage!!! It should also be an even number of characters)
var test = function (_size) { try { store.removeItem(testkey); store.setItem(testkey, new Array(_size + 1).join('0')); } catch (_ex) { return false; } return true; }
var backup = {};
for (var i = 0, n = store.length; i < n; ++i) backup[store.key(i)] = store.getItem(store.key(i));
store.clear(); // (you could iterate over the items and backup first then restore later)
var low = 0, high = 1, _upperLimit = (upperLimit || 1024 * 1024 * 1024) / 2, upperTest = true;
while ((upperTest = test(high)) && high < _upperLimit) { low = high; high *= 2; }
if (!upperTest) {
var half = ~~((high - low + 1) / 2); // (~~ is a faster Math.floor())
high -= half;
while (half > 0) high += (half = ~~(half / 2)) * (test(high) ? 1 : -1);
high = testkey.length + high;
}
if (high > _upperLimit) high = _upperLimit;
store.removeItem(testkey);
for (var p in backup) store.setItem(p, backup[p]);
return high * 2; // (*2 because of Unicode storage)
}
また、テスト前に内容をバックアップしてから復元します。
仕組み：制限に達するかテストに失敗するまでサイズが2倍になります。それはそれから低と高の間の距離の半分を保存し、毎回半分を減算/加算します（失敗時に減算し成功時に加算）適切な値に磨きをかけます。
upperLimitはデフォルトで1GBで、バイナリサーチを開始する前に指数関数的にスキャンする距離を制限します。これも変更する必要があるとは思わないが、私はいつも先を見据えている。 ;）
Chromeの場合
> getStorageTotalSize();
> 10485762
> 10485762/2
> 5242881
> localStorage.setItem("a", new Array(5242880).join("0")) // works
> localStorage.setItem("a", new Array(5242881).join("0")) // fails ('a' takes one spot [2 bytes])
IE11、Edge、およびFireFoxも同じ最大サイズ（10485762バイト）を報告します。
Chrome （デスクトップブラウザ）拡張機能を開発し、 Local Storage 本当の最大サイズをこの理由でテストしました。
私の結果：
Ubuntu 18.04.1 LTS (64-bit)
Chrome 71.0.3578.98 (Official Build) (64-bit)
Local Storage content size 10240 KB (10 MB)
10240 KBを超える使用法でエラーが返されました。
Uncaught DOMException： 'Storage'で 'setItem'を実行できませんでした： 'notes'の値を設定するとクォータを超えました。