HTML5 [1]
CSS3 [1]
JavaScript [3]
JS in HTML5 [4]
Canvas (Context2D) [1]
Canvas (WebGL) [0]
Browser Technologies [2]
jQuery [1]
ExtJS [0]
Prototype.js [2]
SVG [2]
Browsers [2]
Mozilla Plugins [0]
XUL, Jetpack, etc.
Web [2]
MeowW [4]
iOS [0]
Алгоритмы [0]
Криптография [0]
Теория игр [0]
Теория вероятностей [0]
Математика [1]
Мат. анализ [0]
Алгебра [0]
Дискретная математика [0]
Теория графов [0]
Комбинаторика [0]
Теория чисел [0]
Комплексный анализ [0]
Матлогика [0]
Математическая логика, её связь с теорией алгоритмов и т.п.
Тензоры [0]
Геометрия [0]
Топология [0]
Дифференциальная геометрия [0]
Дифференциальные уравнения [0]
11 Январь 2011 в 09:20:36
22:30:32
Web Storages - новые хранилища на клиентской стороне.

В html5 появились новые хранилища - и если куки вмещают только 5 Кб, то здесь - 5 Мб! Причем есть аж два типа хранилища, и работать с ними - проще простого. Есть два типа хранилищ - localStorage и sessionStorage...

LocalStorage предназначен для длительного хранения данных одного сайта, а sessionStorage - для хранения информации в течение сессии. Т.е. sessionStorage - сохраняет данные пока вы не закроете браузер (передаются между страницами на одном сайте), а localStorage - данные хранятся долго, и остаются после закрытия браузера. Как я уже сказал, лимит - 5 Мб, IE, желая выделиться, поднял до 10 Мб. Кстати говоря, в Firefox есть такая штука: данные хранятся для всего сайта, таким образом одна страница может занять все место для всего сайта и даже поддоменов. В Chrome - все наоборот: путь до скрипта учитывается полностью, но таким образом один сайт может занять вообще все место на жестком диске.

LocasStorage и sessionStorage по синтаксису аналогичны: есть объект, у него есть свойства (ну и функции, сохраненные как лямбда-функции в свойствах), если добавить свойство - оно и останется у этого объекта (сохранится)

Code
sessionStorage.myvariable='var'; // сохраняем переменную (после ухода с сайта удаляется)
sessionStorage.myvariable; // возвращает 'var'
localStorage.myvariable='var'; // сохраняем переменную (останется, пока не удалим, или не удалит пользователь)
localStorage.myvariable; // и опять возвратит 'var'

Также можно работать с localStorage и sessionStorage как с массивом или методами:

Code
localStorage["myvariable"]='var'; // снова сохраняем переменную
localStorage.setItem("myvariable", "var"); // сохранение переменной методом
localStorage["myvariable"]; // снова возвращает переменную
localStorage.getItem("myvariable"); // возвращаем переменную методом

А еще у хранилищ есть свойство length, возвращающее количество ключей. Также есть метод key, который принимает единственным параметром число и возвращает значение, распологающееся по этому номеру.

Для удаления переменной мы можем просто выставить ее значение в undefined, но это наверняка чревато: браузер просто сохранит переменную в значении undefined вместо того, чтобы удалить ее. Для удаления есть две функции.

Code
localStorage.remove('myvariable'); // удаляет переменную myvariable
localStorage.clear(); // очистит все переменные

Собственно, я забыл про то что наряду с часто используемым оператором new в JS есть оператор delete.

Code
delete localStorage.myvariable;

А еще оказывается есть событие storage, наступающее при любых манипуляций с хранилищем.

Code
<body onStorage="alert('onStorage!');">
Code
window.addEventListener('storage', function(event){
/*
event.key - ключ данных
event.oldValue - старое значение
event.newValue - новое значение
event.window - окошко... сам не очень понял(
event.uri - по видимому, адрес страницы
*/
}, false);

Кстати, есть скрипт sessionstorage.js, честно эмулирующий все storages в браузерах, его не поддерживающих.Скачать

Просмотров: 1262 |
Всего комментариев: 0
Имя *:
Email:
Код *: