Я создаю приложение, используя редактор Bespin и HTML5 localStorage. Он хранит все файлы локально и помогает с грамматикой, использует JSLint и некоторые другие синтаксические анализаторы для CSS и HTML, чтобы помочь пользователю.
Я хочу рассчитать, сколько из пределов localStorage было использовано и сколько на самом деле. Возможно ли это сегодня? Я думал не просто вычислить биты, которые хранятся. Но опять же я не уверен, что еще есть, что я не могу измерить себя.
Я не нашел универсального способа получить оставшийся предел для браузеров, в которых я нуждался, но я выяснил, что, когда вы достигли предела, появляется сообщение об ошибке. В каждом браузере это разное.
Чтобы максимизировать это, я использовал этот маленький script:
for (var i = 0, data = "m"; i < 40; i++) {
try {
localStorage.setItem("DATA", data);
data = data + data;
} catch(e) {
var storageSize = Math.round(JSON.stringify(localStorage).length / 1024);
console.log("LIMIT REACHED: (" + i + ") " + storageSize + "K");
console.log(e);
break;
}
}
localStorage.removeItem("DATA");
Из этого я получил эту информацию:
Google Chrome
Mozilla Firefox
Safari
Internet Explorer, Edge (сообщество)
Мое решение
До сих пор мое решение заключалось в том, чтобы добавить дополнительный вызов каждый раз, когда пользователь ничего сохранил. И если исключение поймано, я бы сказал им, что у них не хватает емкости хранилища.
Изменить: удалить добавленные данные
Я забыл упомянуть, что для этого на самом деле вам нужно будет удалить элемент DATA, который был установлен первоначально. Это изменение отражено выше, используя функцию removeItem().
Вы можете получить приблизительную идею, используя методы JSON, чтобы превратить весь объект localStorage в строку JSON:
JSON.stringify(localStorage).length
Я не знаю, насколько бы он был точным, особенно с несколькими байтами добавленной разметки, если вы используете дополнительные объекты, но я считаю это лучше, чем думать, что вы только нажимаете 28K и вместо этого делаете 280K ( или наоборот).
IE8 реализует свойство remainingSpace для этой цели:
alert(window.localStorage.remainingSpace); // should return 5000000 when empty
К сожалению, похоже, что это недоступно в других браузерах. Однако я не уверен, что они реализуют нечто подобное.
Вы можете использовать приведенную ниже строку для точного вычисления этого значения и вот пример jsfiddle для иллюстрации его использования
alert(1024 * 1024 * 5 - escape(encodeURIComponent(JSON.stringify(localStorage))).length);
Развернулось на этом сегодня, тестируя (превышая квоту хранения) и взломав решение. ИМО, зная, что такое предел и где мы находимся, гораздо менее ценна, чем реализация функционального способа продолжения хранения за пределами квоты.
Таким образом, вместо того, чтобы пытаться проводить сравнения по размерам и проверки пропускной способности, давайте отреагируем на то, что мы достигли квоты, уменьшим наше текущее хранилище на треть и возобновим хранение. Если указанное сокращение не выполняется, прекратите хранение.
set: function( param, val ) {
try{
localStorage.setItem( param, typeof value == 'object' ? JSON.stringify(value) : value )
localStorage.setItem( 'lastStore', new Date().getTime() )
}
catch(e){
if( e.code === 22 ){
// we've hit our local storage limit! lets remove 1/3rd of the entries (hopefully chronologically)
// and try again... If we fail to remove entries, lets silently give up
console.log('Local storage capacity reached.')
var maxLength = localStorage.length
, reduceBy = ~~(maxLength / 3);
for( var i = 0; i < reduceBy; i++ ){
if( localStorage.key(0) ){
localStorage.removeItem( localStorage.key(0) );
}
else break;
}
if( localStorage.length < maxLength ){
console.log('Cache data reduced to fit new entries. (' + maxLength + ' => ' + localStorage.length + ')');
public.set( param, value );
}
else {
console.log('Could not reduce cache size. Removing session cache setting from this instance.');
public.set = function(){}
}
}
}
}
Эта функция живет внутри объекта-оболочки, поэтому public.set просто вызывает себя. Теперь мы можем добавить в хранилище и не беспокоиться о том, что такое квота или насколько мы близки. Если одно хранилище превышает 1/3, размер квоты - это то, где эта функция перестанет отбраковывать и прекратить сохранение, и в этот момент вы не должны кэшировать в любом случае, правильно?
Чтобы добавить результаты теста браузера:
Firefox I = 22.
Safari Версия 5.0.4 на моем Mac не зависала. Ошибка в Chrome. я = 21.
Opera Сообщает пользователю, что веб-сайт хочет хранить данные, но не имеет достаточно места. Пользователь может отклонить запрос, увеличить лимит до требуемой суммы или до нескольких других ограничений или установить неограниченное количество. Перейдите в opera: webstorage, чтобы сказать, появляется ли это сообщение или нет. я = 20. Ошибка выбрана так же, как Chrome.
Режим стандартов IE9 Ошибка в Chrome. я = 22.
IE9 в режиме стандартов IE8 Сообщение консоли "Ошибка: недостаточно памяти для завершения этой операции". я = 22
IE9 в более старых режимах ошибка объекта. я = 22.
IE8 У вас нет копии для тестирования, но поддерживается локальное хранилище (http://stackoverflow.com/questions/3452816/does-ie8-support-out-of-the-box-in-localstorage)
IE7 и ниже Не поддерживает локальное хранилище.
Вы можете протестировать свой браузер с помощью теста поддержки веб-хранилища
Я протестировал Firefox на моем Android-планшете и ноутбуке Windows и Chromium только на окнах Результаты:
Firefox (окна):
Firefox (android):
Chromium (windows):
В версиях Google Chrome версии 52.0.2743.116 м (64-разрядные), где немного меньше символов 5101k. Это означает, что доступный max может измениться в версиях.
Хотелось бы добавить это в комментарий - не достаточно репутации, извините.
Я провел несколько перфекционных тестов - ожидая, что JSON.stringify(localStorage).length будет дорогостоящим оператором при большой занятости локального хранилища.
http://jsperf.com/occupied-localstorage-json-stringify-length
Это действительно так - примерно в 50 раз дороже, чем отслеживание того, что вы храните, и становится все хуже, чем получает более полная локальная память.
Я сделал набор полезных функций для localStorage * здесь *
http://jsfiddle.net/kzq6jgqa/3/
function getLeftStorageSize() {
var itemBackup = localStorage.getItem("");
var increase = true;
var data = "1";
var totalData = "";
var trytotalData = "";
while (true) {
try {
trytotalData = totalData + data;
localStorage.setItem("", trytotalData);
totalData = trytotalData;
if (increase) data += data;
} catch (e) {
if (data.length < 2) break;
increase = false;
data = data.substr(data.length / 2);
}
}
localStorage.setItem("", itemBackup);
return totalData.length;
}
// Examples
document.write("calculating..");
var storageLeft = getLeftStorageSize();
console.log(storageLeft);
document.write(storageLeft + "");
// to get the maximum possible *clear* the storage
localStorage.clear();
var storageMax = getLeftStorageSize();
Обратите внимание, что это не очень быстро, поэтому не используйте его все время.
С этим я также узнал, что: Item Name будет занимать столько места, сколько его длина, значение Item также будет занимать столько места, сколько их длина.
Максимальное хранилище, которое я получил - все о 5M:
В скрипте вы найдете код с комментариями, чтобы увидеть прогресс в консоли.
Пришло время сделать, надеюсь, что это поможет ☺
Мне нужно было реально моделировать и тестировать, что мой модуль будет делать, когда память будет заполнена, поэтому мне нужно было получить точную информацию о том, когда хранилище заполнено, а не принятый ответ, который теряет эту точность со скоростью я ^ 2.
Здесь мой script, который всегда должен обеспечивать точность 10 при достижении крышки памяти и довольно быстро, несмотря на некоторые легкие оптимизации... EDIT: я сделал script лучше и с точным точностью:
function fillStorage() {
var originalStr = "1010101010";
var unfold = function(str, times) {
for(var i = 0; i < times; i++)
str += str;
return str;
}
var fold = function(str, times) {
for(var i = 0; i < times; i++) {
var mid = str.length/2;
str = str.substr(0, mid);
}
return str;
}
var runningStr = originalStr;
localStorage.setItem("filler", runningStr);
while(true) {
try {
runningStr = unfold(runningStr, 1);
console.log("unfolded str: ", runningStr.length)
localStorage.setItem("filler", runningStr);
} catch (err) {
break;
}
}
runningStr = fold(runningStr, 1);
var linearFill = function (str1) {
localStorage.setItem("filler", localStorage.getItem("filler") + str1);
}
//keep linear filling until running string is no more...
while(true) {
try {
linearFill(runningStr)
} catch (err) {
runningStr = fold(runningStr, 1);
console.log("folded str: ", runningStr.length)
if(runningStr.length == 0)
break;
}
}
console.log("Final length: ", JSON.stringify(localStorage).length)
}
Это может помочь кому-то. В chrome можно попросить пользователя разрешить использовать дополнительное дисковое пространство при необходимости:
// Request Quota (only for File System API)
window.webkitStorageInfo.requestQuota(PERSISTENT, 1024*1024, function(grantedBytes) {
window.webkitRequestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);
}, function(e) {
console.log('Error', e);
});
Посетите https://developers.google.com/chrome/whitepapers/storage#asking_more для получения дополнительной информации.
try {
var count = 100;
var message = "LocalStorageIsNOTFull";
for (var i = 0; i <= count; count + 250) {
message += message;
localStorage.setItem("stringData", message);
console.log(localStorage);
console.log(count);
}
}
catch (e) {
console.log("Local Storage is full, Please empty data");
// fires When localstorage gets full
// you can handle error here ot emply the local storage
}