Локално хранилище, webreference

Постоянен местно съхранение е една област, в която клиентите приложения имат предимства пред сървър. За приложения като операционната система, тя осигурява абстракция слой за съхраняване и извличане на данни, като например настройки или функционално състояние. Тези стойности могат да се съхраняват в системния регистър, INI файлове, XML-файлове или на друго място, в зависимост от платформата на принципи. Ако клиентът се нуждае от местен магазин за нещо повече от двойка ключ / стойност, можете да поставите своя собствена база данни, за да излезе с формат на файла, или произволен брой други решения.

Исторически погледнато, уеб приложение, не е един от тези лакомства. Cookies са били измислени в ранната история на Интернет, и те могат да бъдат използвани, за да се запази местен магазин малки обеми от данни. Но те имат три потенциални недостатъци:

  • Cookies са включени във всяка от HTTP-заявка, като по този начин забавя вашия уеб приложение чрез ненужно предаване на същите данни отново и отново;
  • Cookies са включени във всяка от HTTP-заявка при прехвърляне на данни по интернет в некриптиран вид (ако не изцяло, предавани чрез уеб приложение SSL);
  • Бисквитките са ограничен обем данни от приблизително 4 Kb - достатъчно, за да се забави вашето приложение (виж по-горе.), Но не достатъчно, за да бъде от полза.

Това е, което наистина искаме:

  • непокрит съхранение;
  • работа от страна на клиента;
  • се вземат под внимание актуализацията на страницата;
  • и не изпраща към сървъра.

Преди HTML5, всичко се опитва да направи това в крайна сметка бяха различни повреди.

Кратка история на локалното хранилище за HTML5

Първоначално е имало само един Internet Explorer. Най-малкото, на Microsoft иска светът да се мисли така. За тази цел през първите Microsoft браузъра войни Велики изобретил много неща и да ги включи в своя браузър, който попълва войната - Internet Explorer. Един от тези парчета се нарича DHTML поведение. и една от неговите форми - UserData.

UserData разрешава на уеб страница, за да се съхранява до 64 KB за данни за всеки домейн в йерархична XML структура. Доверени домейни, като например интранет сайтове могат да съхраняват десет пъти повече. И хей, 640K трябва да бъде достатъчно за всички. IE не представи диалогови разрешителни под всякаква форма, така че няма начин да се увеличи размерът на наличната памет.

Прегледът на тези решения имат модел: те са или специфични за един браузър или разчитат на приставки на трети страни. Въпреки героичните усилия, те са коренно различни интерфейси, имат различни ограничения за съхранение и предоставяне на различни начини за взаимодействие с потребителя. Това е проблем, който в HTML5, за да бъде решен: да осигури стандарт API, който е роден поддържа от няколко браузъра без да е необходимо да се разчита на приставки на трети страни.

Въведение в локалното хранилище за HTML5

Какво ще се обадя "HTML5 съхранение" в спецификацията по-нататък "уеб магазин", който по едно време беше част от спецификацията на HTML5, но след това е изолиран в отделна спецификация за безинтересна за вас политически мотивирани. Някои производители на браузъра също я наричат ​​"Местни съхранение" или "ДОМ-басейна." Ситуацията се усложнява от имената на някои от подобни имената на други стандарти, които ще бъдат обсъдени по-долу.

Така че това, което е HTML5-магазин? Просто казано, това е начин за уеб сайтове за съхранение на двойки ключ / стойност на местно ниво с помощта на браузър. Подобно на бисквитки, тези данни се запазва дори и след прекратяване на сайта, затворите раздела браузър, излезете от браузъра или нещо друго. За разлика от бисквитките, че данните, никога не се предава на отдалечен уеб сървър (ако не искате да ги изпратите сами по себе си). За разлика от всички предишни опити да се осигури постоянен местно съхранение, тази технология е вградена в браузъра, така че тя е на разположение, дори когато не е на трети страни плъгини.

Кои браузъри? Е, най-новата версия на почти всеки браузър поддържа HTML5-магазин. дори Internet Explorer!

Проверка за HTML5-магазин

Вместо самостоятелно писане на тази функция, можете да използвате Modernizr библиотека.

Използване на HTML5 съхранение

Обадете setItem () със съществуващата име на ключ мълчаливо замени предишната стойност. Обадете getItem () с несъществуваща ключ ще се върне NULL, и няма да предизвика изключение.

Тя може да бъде пренаписана, използвайки синтактичните скоби:

Има и методи за отстраняване на стойности за име на ключ, както и почистване на цялата хранилището (т.е. премахване на всички ключове и стойности едновременно).

Обадете removeItem () с несъществуващ ключ не се връща.

И накрая, има имот за общата сума на съхранение и диапазон от стойности за обхождане на всички ключове на индекса (получава всеки ключов име).

Ако индексът на повикване () не е в границите от 0 до (дължина-1), а след това функцията връща нула.

Проследяване на съхранение HTML5-област

Ако искате софтуера, за да следите промените в хранилището, ще трябва да хване съхранението на събитието. Това събитие се вдигна на прозорец. когато setItem (). removeItem () или ясен () се обади и нещо се промени. Например, ако сте инсталирали или съществуващата стойност, наречена ясно (), когато няма ключ, събитието не работи, тъй като зоната за съхранение в действителност не се променя.

handle_storage функция за обратно извикване се нарича с предмет StorageEvent. с изключение на Internet Explorer, където събития се съхраняват в window.event.

В този случай, е променливата ще бъде обект на StorageEvent. който има следните полезни свойства.

Страницата, която призовава метода, който доведе до промяната.

* Забележка: URL имот първоначално е бил наречен URI и някои браузъри поддържат този имот, преди да промените спецификацията. За да се осигури максимална съвместимост, трябва да проверите дали съществува URL имота. и ако не, проверете вместо URI собственост.

събитие за съхранение не може да бъде отменена вътре handle_storage на функция за обратно извикване не е възможно да се спре промяната. Това е просто начин браузъра, за да ви кажа: "Хей, това е точно това, което се е случило. Вие не може да направи нищо, аз просто исках да знаеш. "

Ограничения в последните версии на браузърите

Говорейки за историята на местната съхранение с помощта на трети страни плъгини, споменах ограниченията на всяка техника. Спомних си, че той не каза нищо за ограниченията на вече стандарт HTML5-магазина. Ще ви дам отговорите, и след това да ги обясни. Отговори по важност, са както следва: "5 мегабайта", "QUOTA_EXCEEDED_ERR" и "не".

"5 мегабайта" - това колко място е дадено по подразбиране. Тази стойност е учудващо еднакви във всички браузъри, макар и формулирано не повече от едно изречение в спецификацията на HTML5. Ние трябва да разберем, че ви държи линията, а не на данните в оригиналния му формат. Ако съхранявате много от цели числа или числа с плаваща запетая, разликата в представянето може да бъде голям. Всяка цифра на броя на плаваща точка се съхранява като характер, а не на обичайното представяне на такива номера.

«QUOTA_EXCEEDED_ERR» е изключение, че ще получите, ако надвишите си квота от 5 MB. "Не" е отговорът на следващия очевидния въпрос е: "Мога ли да поиска от потребителя за повече място за съхранение". Към момента на писане в браузъра не се изпълнява всеки механизъм за уеб разработчици, за да поискат повече пространство за съхранение. Някои браузъри (например Опера) позволяват на потребителя да контролира квота на хранилището за всеки сайт, но това е чисто стартирани от потребителя, които не са свързани с факта, че вие ​​като програмист може да вградите в уеб приложение.

HTML5-магазин в действие

Нека погледнем на съоръжението за HTML5-склад в експлоатация. Позовавайки се отново на "ъгли" играта. сме изградили в главата за рисуване. С тази игра един малък проблем: ако затворите прозореца на браузъра в средата на играта, вие губите резултати. Но с HTML5 гардероб, можем да поддържаме процеса на играта на сайта, в рамките на браузъра. Отваряне на демонстрацията, да направи няколко хода, след това затворете раздела браузър, а след това отново да се отвори. Ако вашият браузър поддържа HTML5-магазин демо страница магически спомня точната позиция в играта, включително и колко удара, които сте направили, позицията на всеки от чиповете на дъската, а дори и на избрания чип.

Как става това? Всеки път, когато има промяна в играта, ние ще наричаме тази функция.

Когато зареждането на страницата, вместо автоматично newGame () функция разговор. които ще се върнат всички променливи в първоначалните стойности, което наричаме resumeGame (). resumeGame () функция с помощта на HTML5-магазина проверява състоянието на играта в местния магазин. Ако е така, тогава той възстановява стойността с помощта на локално хранилище обекта.

Най-важната част от тази функция е протест, които споменах по-рано в тази глава, и се повтаря тук: Данните се съхраняват като струни. Ако съхранявате нещо друго, а не като низ, трябва да ги конвертирате при получаване. Например, един флаг, че играта в процеса (gGameInProgress) е логическа тип. В функция saveGameState () ние просто го пазят и не се тревожи за типа на данните.

Но resumeGame () функция, трябва да се помисли за стойността, получена от местния магазин като низ и ръчно да се изгради подходяща булева стойност.

По същия начин, броя на стъпките, съхранявани в gMoveCount като цяло, като функция на saveGameState () ние просто го спаси.

Извън двойки ключ / стойност: конкурентна визия

Въпреки, че историите са много трикове и заобиколни решения за текущото състояние на HTML5 гардероб изненадващо добре. Новият API са стандартизирани и са включени във всички основни браузъри, платформи и устройства. За уеб разработчици, виждате това всеки ден, нали? Но това е повече от "5 мегабайта двойки ключ / стойност" и бъдещия постоянен локално хранилище е. как да се каже. Е, нека конкурентната визия.

Уеб спецификация SQL база данни е била извършена в четири браузъри и платформи.

Подкрепа уеб SQL

Разбира се, ако използвате повече от една база данни в живота си, тогава знаете, че «SQL» е по-скоро маркетингов термин, отколкото силно и бързо стандарт (всеки може да се каже същото за HTML5, но това няма значение). Разбира се, има действително спецификация SQL (това се нарича SQL-92), но в света има база данни на сървър, който съвпада само тази спецификация. Има Oracle SQL, Microsoft SQL, SQL за MySQL, SQL за PostgreSQL, SQL в SQLite. В действителност, всеки от тези продукти с течение на времето добавя нови SQL функции, така че не е достатъчно да се каже «SQL в SQLite» дори. Трябва да се каже «SQL версия, която идва с SQLite версия X.Y.Z».

Всичко това ни води до следващата клауза, която в момента Химикалка топ уеб SQL спецификация.

Именно на този фон, че аз ще ви разкажа за един конкурентен визия за напреднали, постоянно локално хранилище за уеб приложения: индексираната база от данни API. -рано известен като «WebSimpleDB», сега се нарича галено IndexedDB.

Индексираната база от данни API осигурява това, което се нарича съхранение обект, с много идеи, заимствани от базата данни на SQL. Налице е "база данни" с "записи", всеки запис има определен брой "полета". Всяка област има характерен тип на данни, който се определя при създаването на базата данни. Можете да изберете подмножество на записи, след което ги изброят като "курсора". Промени в магазина обект се обработват с "сделката".

Ако някога сте програмирали SQL база данни, а след това тези условия вероятно са ви познати. Основната разлика е, че в магазина обект не е структуриран език за заявки. Вие не пиша състояние, като «SELECT * от потребители, когато ACTIVE =" Y "». Вместо това, методите, предвидени складови помещения за откриване ПОТРЕБИТЕЛИ база, трансферни рекорди, филтриране нашите данни и използване на методи за достъп, за да получите стойността на всяко поле в останалите записи. Един ранен минете през всички на IndexedDB (Early пасаж IndexedDB) е добър ръководство за това как да работят IndexedDB IndexedDB и сравнение на цени за уеб SQL.

Какво можете да направите с това как IndexedDB уеб разработчик? В момента почти нищо, с изключение на някои технологични демонстрации. След една година? Може би.

Можете да прочетете повече

HTML5-магазин

Уеб SQL