Создание веб-страниц с локальным хранилищем

 if (Modernizr.localstorage) {    
    $("#result").text('localStorage is available');
} else {    
    $("#result").text('localStorage is not available');   
}

Пример кода можно найти здесь .

Чтобы добавить данные, вы можете использовать функцию setItem, добавить новое значение через синтаксис массива или создать новое свойство. В следующем примере данные добавляются тремя способами.

 
if (Modernizr.localstorage) {    
    var localStore = window.localStorage;
    localStore.setItem["Country"] = "USA";
    localStore["Country"] = "USA";
    localStore.Country = "USA";   
    $("#result").text(localStore.Country);
} else {    
    $("#result").text('localStorage is not available');   
}

Пример кода можно найти здесь .

Если размер данных слишком велик, будет выдана ошибка «Недостаточно памяти». Чтобы избежать этой ошибки, хорошей идеей является проверка того, какое место доступно через функцию оставшегося пространства. Это возвращает целочисленное значение с оставшейся квотой диска или памяти.

 
if (Modernizr.localstorage) {
    var localStore = window.localStorage;
    if (localStore.remainingSpace > 0) {
        // you have space to do work
    }
} else {
    $("#result").text('localStorage is not available');
}

Пример кода можно найти здесь .

Обновить

Я забыл упомянуть об этом, так что вот обновление. Функция remaingSpace доступна в IE. IE
Команда представила этот метод в W3C, но пока он не вошел в спецификацию.
Лучший способ проверить, можете ли вы добавить часть данных, — это добавить попытку / зацепку вокруг части
код, который устанавливает хранилище. Как и ожидалось, каждый браузер выдает разные ошибки. Вот код, который я
используется для заполнения локального хранилища.

 
if (Modernizr.localstorage) {
var localStore = window.localStorage;
localStore.RandomData = "Random";

for (i = 0; i 

И вот имя ошибки результатов, за которым следует сообщение об ошибке для каждого браузера.

Firefox 7.0.1

NS_ERROR_DOM_QUOTA_REACHED — достигнут максимальный размер постоянного хранилища

IE9

Ошибка — недостаточно памяти

Safari 5.1.1

QUOTA_EXCEEDED_ERR — QUOTA_EXCEEDED_ERR: исключение DOM

Хром 15.0.874

QUOTA_EXCEEDED_ERR — QUOTA_EXCEEDED_ERR: исключение DOM

Пример кода можно найти здесь . Кстати, IE9 перестал бы отвечать за меня на этой странице,
так что единственный способ проверить это — создать отдельную страницу на моем личном сайте. Это то же самое
код, и вы можете посетить его здесь .

Удаление данных из localStorage тоже легко. Вызов removeItem удаляет элемент из хранилища.

 if (Modernizr.localstorage) {
    var localStore = window.localStorage;
    localStore.Country = 'USA';

    if (localStore.Country) {
        localStore.removeItem("Country");
    }
} else {
    $("#result").text('localStorage is not available');
}

Пример кода можно найти здесь .

Чтение данных из хранилища может быть сделано через синтаксис массива или с помощью свойства.

 if (Modernizr.localstorage) {
    var localStore = window.localStorage;
    localStore.Country = "USA";

    if (localStore.Country) {
        $("#result").text(localStore.Country);
    }
} else {
    $("#result").text('localStorage is not available');
}

Пример кода можно найти здесь .

Собираем все вместе

Веб-хранилище отлично, если браузер его поддерживает. Для старых браузеров они не будут поддерживать веб-хранилище, но будут поддерживать файлы cookie. Хороший запасной вариант — хранить данные внутри куки, если веб-хранилище недоступно. Следующий пример делает именно это.

 $(function() {
    $("#write").bind("click", function() {
        if (Modernizr.localstorage) {
            // your browser supports localStorage
            var localStore = window.localStorage;
            localStore.Country = "USA";
        } else {
            // your browser doesn't supports localStorage
            // write to a cookie
            var exdate = new Date();
            exdate.setDate(exdate.getDate() + 365);
            var cookie = "USA" + "; expires=" + exdate.toUTCString();
            document.cookie = "Country=" + cookie;
        }
    });
    $("#read").bind("click", function() {
        $("#result").text("");
        if (Modernizr.localstorage) {
            // your browser supports localStorage
            var localStore = window.localStorage;
            $("#result").text(localStore.Country);
        } else {
            // your browser doesn't supports localStorage
            // write to a cookie
            var cookies = document.cookie.split(";");
            for (i = 0; i 

Пример кода можно найти здесь .

Веб-хранилище — отличное дополнение к вашей броне, когда вам нужно создать отличный веб-сайт. Хранение данных на клиенте уменьшает объем памяти, который необходим серверу, а также приближает данные к пользователю, что повышает производительность. Насколько лучше, все зависит от того, сколько данных вы храните. Но правило здравого смысла применяется; не храните огромное количество данных в веб-хранилище. Делайте вещи максимально легкими. Ваши пользователи будут благодарны вам в конце.