Много често първото приложение на JavaScript е Todo списък, но проблемът с такива приложения е, че след опресняване на страницата всички елементи в списъка изчезват.

Едно просто решение на този проблем е да използвате локално хранилище(локално хранилище). Локалното хранилище ви позволява да съхранявате данни на машината на потребителя и можете лесно да заредите списъка от него, след като опресните страницата. В тази статия ще напишем малък списък със задачи, използвайки локално хранилище.

Какво е локално хранилище?

Локалното хранилище („уеб хранилище“) първоначално беше част от спецификацията на HTML5, но сега е преместено в отделно. Можете да съхранявате данни по два начина:

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

Локалното съхранение ви позволява да съхранявате данни на компютъра на потребителя под формата на двойки ключ-стойност и тези данни ще бъдат достъпни дори след като браузърът е затворен или компютърът е изключен.

HTML

За да създадем списък със задачи, имаме нужда от:

  • Въвеждане на текст за въвеждане на съдържанието на елемента.
  • Бутон за добавяне на артикул към списъка.
  • Бутон за изчистване на списъка.
  • Самият списък
      ).
    • И допълнителен div за показване на грешки.

    Така че HTML маркирането ще изглежда така:

    Достатъчно проста структура, който ще оживим с JavaScript.

    защото използваме jQuery, трябва да го включим допълнително.

    JavaScript

    Първо, трябва да проследим кликването върху бутона за добавяне и да проверим дали полето за въвеждане не е празно:

    $("#add").click(function() ( var Description = $("#description").val(); if($("#description").val() == "") ( $( "#предупреждение").html(" Внимание!Оставихте задачите празни"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; )

    Този код проверява стойността на въведения текст и ако е празен, показва грешка и връща false, така че останалата част от кода да не се изпълнява и елементът да не се добавя към списъка.

    // вмъкнете запис $("#todos").prepend("

  • " + Описание + "
    • "); // изтрийте всичко останало в текстовото поле $("#form").reset(); var todos = $("#todos").html(); localStorage.setItem("todos", todos); връща невярно; ));

    За да работите с локално хранилище, трябва да предоставите ключ и съответната му стойност. В нашия случай нека наречем ключа „todos“ и стойността ще бъде целият HTML код, който се съдържа в списъка (в маркера

      ). Този код е лесен за получаване jQuery. И накрая връщаме false, за да предотвратим изпращането на формуляра и да не презареди страницата.

      Следващата стъпка е да проверите локалното хранилище, ако има стойност с ключа „todos“, заредете списъка от локалното хранилище:

      If (localStorage.getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); )

      защото съхраняваме готов HTMLв хранилището, тогава просто поставяме този код в списъка.

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

      $("#clear").click(function() ( window.localStorage.clear(); location.reload(); return false; ));

      Готов! Пълният код изглежда така:

      $(document).ready(function() ( $("#add").click(function() ( var Description = $("#description").val(); if ($("#description"). val() == "") ( $("#alert").html(" Внимание!Оставихте задачите празни"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; ) $("#todos").prepend("

    • " + Описание + "
      • "); $("#form").reset(); var todos = $("#todos").html(); localStorage.setItem("todos", todos); return false; )); if (localStorage .getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); ) $("#clear").click(function() ( window.localStorage.clear( ); location.reload(); return false; )); ));

      Поддръжка на браузър

      Уеб съхранението се поддържа от всички основни браузъри, дори IE8. Трябва да се страхувате само от IE7 и по-надолу.

      Заключение

      Локално съхранение в такива малки приложения може да стане страхотен заместителбаза данни. Съхраняването на малки количества информация не трябва да е трудно.

      Създаването на приложение за списък със задачи обикновено е първото приложение, което създавате, когато изучавате JavaScript, но проблемът с всички тези приложения е, че когато презаредите страницата, всички тези списъци изчезват.
      Има просто решение - използване на локално хранилище. Предимството на локалното съхранение е, че можете да съхранявате битове данни на компютъра на потребителя и когато страницата се презареди, всички списъци със задачи са все още там.

      Какво е локално хранилище?

      Локалното хранилище е част от мрежата за съхранение, която сама по себе си е част от спецификацията HTML5. Има две опции за съхраняване на данни в BOM:

      • Локално съхранение: Съхранява данни без дата на изтичане и това е опцията, която ще използваме, защото искаме нашите обяви да останат на страницата възможно най-дълго.
      • Съхранение на сесии: Записва данни само за една сесия, така че ако потребителят затвори раздела и го отвори отново, всичките му данни ще бъдат загубени.

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

      Ако мислим за списък със задачи, тогава ще ви трябва следното:

      • Вход, където ще бъде възможно да поставим нашия списък
      • Бутон за въвеждане, за да добавите списък
      • Бутон за изчистване на целия дневник
      • Неподреден контейнер за списък, където нашият списък ще бъде поставен в списък с елементи
      • И накрая, имаме нужда от DIV контейнер, за да покажем известие, когато се опитате да въведете празна задача.

      Така че нашият HTML трябва да изглежда така:

      Това е доста стандартен HTML контейнер и с нашия JavaScript можем да го попълним с динамично съдържание.

      Тъй като в този пример ще използваме jQuery, ще трябва да го включите и в HTML документа.

      JavaScript

      Ако помислим за структурата на обикновено приложение за „списък със задачи“, първото нещо, което трябва да направим, е да проверим дали въведената стойност има празна стойност, когато потребителят кликне върху бутона „добавяне“ или „проверка“:

      $("#add").click(function() ( var Description = $("#description").val(); //ако задачата е празна if($("#description").val( ) == "") ( $("#alert").html(" Внимание!Оставихте задачите празни"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; )

      Всичко, което направихме, беше да тестваме щракването върху бутона Добавяне и да изпълним прост тест, за да видим дали потребителят е попълнил въведеното с нещо. Ако не, тогава div за предупреждение изскача и остава за 1000ms и след това изчезва.

      Следващото нещо, което трябва да направим, е да вмъкнем елемента от списъка със стойността във входния ред и ще го предшестваме, така че когато потребителят добави задача, тя винаги да отива в горната част на списъка и след това да съхранява елемент от списък в локално хранилище, като този:

      // добавяне на елемент от списък $("#todos").prepend("

    • " + Описание + "
      • "); // изтриване на всичко във входа $("#form").reset(); var todos = $("#todos").html(); localStorage.setItem("todos", todos); return невярно; ));

      Както можете да видите, това е доста стандартен jQuery и когато става въпрос за локално съхранение, трябва да съхраняваме ключа и стойността. Ключът е име, което си даваме, в този случай просто ще го наречем „Todos“, след което трябва да дефинираме какво искаме да съхраняваме, което в този случай е целият HTML, който е вътре в Todos на неподредения списък. Както можете да видите, ние заснехме всичко с jQuery и накрая върнахме „false“ (false), така че формулярът да не се предаде и страницата ни да не се опреснява.

      Следващата ни стъпка е да проверим дали имаме нещо съхранено локално. Ако има, тогава трябва да го поставим на страницата, тъй като сме дали на нашия ключ името "todos", трябва да проверим за неговото съществуване. Като този:

      // ако имаме нещо на локално място за съхранение, което if(localStorage.getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); )

      Ако тествате нашето приложение и презаредите страницата, ще видите, че вече работи. Всичко, което трябва да направим, е да създадем функция, която ще отговаря за изчистването на целия списък. Изтриваме цялото локално хранилище, презареждаме страницата, за да влезе в сила нашата промяна, и след това връщаме „false“, за да предотвратим хеша преди URL адреса по следния начин:

      // изчистване на цялото локално хранилище $("#clear").click(function() ( window.localStorage.clear(); location.reload(); return false; ));

      Пълният код изглежда така:

      $("#add").click(function() ( var Description = $("#description").val(); if($("#description").val() == "") ( $( "#предупреждение").html(" Внимание!Оставихте задачите празни"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; ) $("#todos").prepend("

    • " + Описание + "
      • "); $("#form").reset(); var todos = $("#todos").html(); localStorage.setItem("todos", todos); return false; )); if(localStorage .getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); ) $("#clear").click(function() ( window.localStorage.clear( ); location.reload(); връща невярно; ));

      Поддръжка на браузър

      Поддръжката на Web Storage е доста добра за спецификацията HTML5, поддържа се от всички основни браузъри и дори IE8.

      Превод: Влад Мержевич

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

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

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

      Ето какво наистина искаме:

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

      Преди HTML5 всички опити да се постигне това завършваха с неуспех по различни начини.

      Кратка история на локалното съхранение преди HTML5

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

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

      През 2002 г. Adobe представи функция във Flash 6, която беше неуспешна и подвеждащо наречена „Flash cookies“. Във Flash тази функция е известна по-точно като Локални споделени обекти (локално достъпни обекти, LSO). Накратко, позволява на Flash обекти да съхраняват до 100 KB данни на домейн. Брад Нойберг разработи ранен прототип на мост между Flash и JavaScript, наречен AMASS (AJAX Massive Storage System), но беше ограничен от някои странности на дизайна на Flash. До 2006 г., с появата на ExternalInterface във Flash 8, достъпът до LSO чрез JavaScript стана много по-лесен и по-бърз. Брад пренаписа AMASS и го интегрира в популярния Dojo Toolkit под псевдонима dojox.storage. Flash „безплатно“ дава на всеки домейн 100 kb място за съхранение. В допълнение, той подканва потребителя да увеличи обема на хранилището с порядък (1 MB, 10 MB и т.н.), когато бъде поискано.

      ако (Modernizr.localstorage) (
      // window.localStorage е наличен!
      ) иначе (
      // няма вградена поддръжка за HTML5 съхранение
      }

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

      HTML5 съхранението се основава на имената на двойки ключ/стойност. Вие съхранявате информация въз основа на име на ключ и след това можете да извлечете тези данни със същия ключ. Името на ключа е низ. Данните могат да бъдат от всеки тип, който JavaScript поддържа, включително низове, булеви стойности, цели числа или числа с плаваща запетая. Данните обаче всъщност се съхраняват като низ. Ако не съхранявате и не извличате низове, ще трябва да използвате функции като parseInt() или parseFloat(), за да преведете получените данни в правилните типове JavaScript.

      Интерфейс за съхранение (
      Вземете чрез getItem(ключ);
      Задаване чрез setItem(ключ, данни);
      };

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

      като другите JavaScript обектиможете да получите достъп до обекта localStorage като асоциативен масив. Вместо да използвате методите getItem() и setItem(), можете просто да използвате квадратни скоби. Например тази част от кода

      var foo = localStorage.getItem("лента");
      // ...
      localStorage.setItem("лента", foo);

      може да се пренапише с помощта на синтаксиса на квадратни скоби:

      var foo = localStorage["bar"];
      // ...
      localStorage["bar"] = foo;

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

      Интерфейс за съхранение (
      Премахване чрез removeItem(ключ);
      изчистване();
      }

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

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

      Интерфейс за съхранение (
      дължина
      Вземете ключ (неотрицателно цяло число);
      }

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

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

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

      Събитието за съхранение се поддържа навсякъде, където се изпълнява обектът localStorage, включително Internet Explorer 8. IE 8 не поддържа стандарта W3C addEventListener (въпреки че най-накрая ще бъде добавен в IE 9), така че за да уловите събитието за съхранение, трябва да проверите кое двигател за събития, който поддържа браузър (ако сте правили това преди с други събития, можете да пропуснете този раздел до края). Прихващането на събитието за съхранение работи по същия начин като прихващането на други събития. Ако предпочитате да използвате jQuery или някой друг JavaScript библиотеказа да регистрирате манипулатори на събития, можете да направите това и със съхранение.

      ако (window.addEventListener) (
      window.addEventListener("storage", handle_storage, false);
      ) иначе (
      window.attachEvent("onstorage", handle_storage);
      };

      Обратното извикване handle_storage ще бъде извикано с обект StorageEvent, освен в Internet Explorer, където събитията се съхраняват в window.event.

      функция handle_storage(e) (
      if (!e) (e = window.event;)
      }

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

      *Забележка: Свойството url първоначално се нарича uri и някои браузъри поддържаха това свойство преди промяната на спецификацията. За максимална съвместимост трябва да проверите дали съществува свойството url и ако не, вместо това проверете свойството uri.

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

      Ограничения в текущите браузъри

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

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

      „QUOTA_EXCEEDED_ERR“ е изключението, което получавате, ако надвишите квотата си от 5 MB. „Не“ е отговорът на следващия очевиден въпрос: „Мога ли да поискам от потребителя повече място за съхранение?“. Към момента на писане браузърите не прилагат никакъв механизъм за уеб разработчиците да изискват повече място за съхранение. Някои браузъри (като Opera) позволяват на потребителя да контролира квотите за съхранение за всеки сайт, но това е чисто потребителска инициатива и няма нищо общо с това, което вие като разработчик можете да вградите във вашето уеб приложение.

      HTML5 съхранение в действие

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

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

      функция saveGameState() (

      localStorage["halma.game.in.progress"] = gGameInProgress;
      за (променлива i = 0; i< kNumPieces; i++) {
      localStorage["halma.piece." + i + ".row"] = gPieces[i].row;
      localStorage["halma.piece." + i + ".column"] = gPieces[i].column;
      }
      localStorage["halma.selectedpiece"] = gSelectedPieceIndex;
      localStorage["halma.selectedpiecehasmoved"] = gSelectedPieceHasMoved;
      localStorage["halma.movecount"] = gMoveCount;
      връща вярно;
      }

      Както можете да видите, обектът localStorage се използва за запазване на прогреса на играта (gGameInProgress, boolean). След това всички чипове се сортират (gPieces , JavaScript масив) и съхранявайте ред и колона за всеки. След това се съхраняват някои допълнителни състояния на играта, включително текущо избраното парче (gSelectedPieceIndex, цяло число), парчето, което е в средата на дълга поредица от скокове (gSelectedPieceHasMoved, булево) и общ бройнаправени ходове (gMoveCount, цяло число).

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

      функция resumeGame() (
      if (!supportsLocalStorage()) ( return false; )
      gGameInProgress = (localStorage["halma.game.in.progress"] == "true");
      if (!gGameInProgress) ( return false; )
      gPieces = нов масив(kNumPieces);
      за (променлива i = 0; i< kNumPieces; i++) {
      var row = parseInt(localStorage["halma.piece." + i + ".row"]);
      var column = parseInt(localStorage["halma.piece." + i + ".column"]);
      gPieces[i] = нова клетка(ред, колона);
      }
      gNumPieces = kNumPieces;
      gSelectedPieceIndex = parseInt(localStorage["halma.selectedpiece"]);
      gSelectedPieceHasMoved = localStorage["halma.selectedpiecehasmoved"] == "true";
      gMoveCount = parseInt(localStorage["halma.movecount"]);
      drawBoard();
      връща вярно;
      }

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

      localStorage["halma.game.in.progress"] = gGameInProgress;

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

      gGameInProgress = (localStorage["halma.game.in.progress"] == "true");

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

      localStorage["halma.movecount"] = gMoveCount;

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

      gMoveCount = parseInt(localStorage["halma.movecount"]);

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

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

      One vision е акроним, който вече знаете - SQL. През 2007 г. Google стартира Gears, добавка за различни браузъри с отворен код. програмен код, който включва вградена база данни, базирана на SQLite. Този ранен прототип по-късно повлия на създаването на спецификацията на уеб SQL базата данни. Уеб SQL база данни (преди известна като "WebDB") предоставя тънка обвивка около SQL база данни, която ви позволява да правите следните неща от JavaScript:

      openDatabase("документи", "1.0", "Локално съхранение на документи", 5*1024*1024, функция (db) (
      db.changeVersion("", "1.0", функция (t) (
      t.executeSql("CREATE TABLE docids (id, name)");
      ), грешка);
      });

      Както можете да видите, повечето от действията са на линия с метода ExecuteSQL. Този низ може да поддържа всяка SQL команда, включително SELECT, UPDATE, INSERT и DELETE. Това е като програмиране на база данни от страна на сървъра, само че го правите с JavaScript! О, радост!

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

      Поддръжка на уеб SQL база данни
      IE Firefox сафари Chrome Опера iPhone Android
      – – 4.0+ 4.0+ 10.5+ 3.0+ 2.0+

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

      Всичко това ни води до следващото предупреждение, което в момента е поставено в горната част на спецификацията на Web SQL.

      Спецификацията стигна до задънена улица: всички заинтересовани разработчици използват SQL от страна на сървъра (SQLite), но се нуждаем от няколко независими реализации, за да продължим по пътя на стандартизацията. Докато други разработчици се интересуват от прилагането на тази спецификация, описанието на SQL диалекта е оставено просто като препратка към Sqlite, което не се приема от стандарта.

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

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

      Ако някога сте програмирали SQL бази данни, тези термини вероятно са ви познати. Основната разлика е, че съхранението на обекти няма структуриран език за заявки. Не пишете условие като "SELECT * from USERS where ACTIVE = "Y"". Вместо това ние използваме методите, предоставени от хранилището на обекти, за да отворим базата данни USERS, да изброим записите, да филтрираме нашите записи и да използваме методи за достъп, за да получим стойността на всяко поле от останалите записи. Едно ранно разглеждане на IndexedDB е добро ръководство за това как работи IndexedDB и как IndexedDB се сравнява с Web SQL.

      Към момента на писане IndexedDB е внедрен само в бета версията на Firefox 4. За разлика от тях Mozilla заяви, че никога няма да внедри Web SQL. Google заявиха, че обмислят поддръжка на IndexedDB за Chromium и Google Chrome. И дори Microsoft каза, че IndexedDB е „страхотно решение за мрежата“.

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

      The API за уеб съхранениепредоставя механизми, чрез които браузърите могат да съхраняват двойки ключ/стойност, по много по-интуитивен начин от използването на бисквитки.

      Концепции и използване на уеб съхранение

      Двата механизма в Web Storage са както следва:

      • sessionStorage поддържа отделна зона за съхранение за всеки даден източник, която е налична за продължителността на сесията на страницата (докато браузърът е отворен, включително презареждане и възстановяване на страници)
        • Съхранява данни само за сесия, което означава, че данните се съхраняват до затваряне на браузъра (или раздела).
        • Данните никога не се прехвърлят към сървъра.
        • Ограничението за съхранение е по-голямо от бисквитка (най-много 5 MB).
      • localStorage прави същото, но продължава дори когато браузърът е затворен и отворен отново.
        • Съхранява данни без дата на изтичане и се изчиства само чрез JavaScript или изчистване на кеша на браузъра / Локално съхранени данни.
        • Ограничението за съхранение е максималното измежду трите.

      Спецификации

      Спецификация Статус Коментирайте
      HTML жизнен стандарт Стандарт на живот

      Съвместимост с браузър

      Window.localStorage

      https://github.com/mdn/browser-compat-data и ни изпратете заявка за изтегляне.

      работен плотПодвижен
      Chromeръб, крайFirefoxInternet ExplorerОперасафариandroid webviewChrome за AndroidFirefox за AndroidOpera за AndroidSafari на iOSИнтернет на Samsung
      localStorageПълна поддръжка на Chrome 4Edge Пълна поддръжка 12Firefox Пълна поддръжка 3.5IE Пълна поддръжка 8Opera Пълна поддръжка 10.5Пълна поддръжка на Safari 4

      Легенда

      Пълна подкрепаПълна подкрепа

      Window.sessionStorage

      Таблицата за съвместимост на тази страница е генерирана от структурирани данни. Ако искате да допринесете за данните, моля, разгледайте https://github.com/mdn/browser-compat-data и ни изпратете заявка за изтегляне.

      Актуализирайте данните за съвместимост в GitHub

      работен плотПодвижен
      Chromeръб, крайFirefoxInternet ExplorerОперасафариandroid webviewChrome за AndroidFirefox за AndroidOpera за AndroidSafari на iOSИнтернет на Samsung
      sessionStorageПълна поддръжка на Chrome 5Edge Пълна поддръжка 12Firefox Пълна поддръжка 2IE Пълна поддръжка 8Opera Пълна поддръжка 10.5Пълна поддръжка на Safari 4WebView Android Пълна поддръжка ДаChrome Android Пълна поддръжка ДаFirefox Android Пълна поддръжка ДаOpera Android Пълна поддръжка 11Safari iOS Пълна поддръжка 3.2Samsung Internet Android Пълна поддръжка Да

      Легенда

      Пълна подкрепаПълна подкрепа

      Режими на частно сърфиране / инкогнито

      Повечето съвременни браузъри поддържат опция за поверителност, наречена "Инкогнито", "Частно сърфиране" или нещо подобно, което не съхранява данни като история и бисквитки. Това е фундаментално несъвместимо с уеб съхранението по очевидни причини. Поради това доставчиците на браузъри експериментират с различни сценарии за това как да се справим с тази несъвместимост.

      Повечето браузъри са избрали стратегия, при която API за съхранение все още са налични и привидно напълно функционални, с една голяма разлика, че всички съхранени данни се изтриват след затваряне на браузъра. За тези браузъри все още има различни интерпретации на това какво трябва да се направи със съществуващите съхранени данни (от обикновена сесия на сърфиране). Трябва ли да е достъпно за четене, когато е в личен режим? След това има някои браузъри, най-вече Safari, които са избрали решение, при което съхранението е налично, но е празно и има присвоена квота от 0 байта, което на практика прави невъзможно записването на данни в него.

      Разработчиците трябва да са наясно с тези различни реализации и да ги вземат предвид, когато разработват уебсайтове в зависимост от API за уеб съхранение. За повече информация, моля, погледнете тази публикация в блога на WHATWG, която конкретно се занимава с тази тема.

      Изпрати статия с история за HTML5 LocalStorage в браузърите. Нека му дадем думата.

      Опитах се да напиша най-простото и разбираемо ръководство за използване на технологията localStorage. Статията се оказа доста малка, поради факта, че самата технология и средствата за работа с нея не носят нищо сложно. Трябва само да знаете малко JavaScript, за да започнете. Така че, дайте на тази статия 10 минути и можете спокойно да добавите реда „Знам как да работя с localStorage“ към автобиографията си.

      Какво е localStorage?

      Ето как изглежда JavaScript обект:

      Var myCar = (колела: 4, врати: 4, двигател: 1, име: "Jaguar")

      Ето как изглежда JSON. Почти същото като обикновен js обект, само че всички свойства трябва да бъдат оградени в кавички.

      ( "firstName": "Иван", "lastName": "Иванов", "address": ( "streetAddress": "Moskovskoe sh., 101, kv.101", "city": "Leningrad", "postalCode": 101101), "телефонни номера": [ "812 123-1234", "916 123-4567" ] )

      За да разберете какво е localStorage, просто си представете, че някъде във вашия браузър има такъв обект, който можем да използваме. В същото време този обект не изчиства стойностите, които записваме там, ако презаредим страницата или дори напълно затворим браузъра.

      Ако се говори JavaScript, тогава localStorage е свойство на глобалния обект на браузъра (прозорец). Може да бъде достъпен като window.localStorage или просто localStorage.

      Също така си струва да се спомене, че браузърът има клонинг на localStorage, който се нарича sessionStorage. Единствената им разлика е, че последният съхранява данни само за един раздел (сесия) и просто ще освободи мястото си веднага щом затворим раздела

      Да го видим на живо. Например в Google Chrome трябва да отворите DevTools (F12), да отидете в раздела „Ресурси“ и в левия панел ще видите localStorage за този домейн и всички стойности, които съдържа.

      Между другото, трябва да знаете как работи localStorage с домейни. За всеки домейн вашият браузър създава свой собствен обект localStorage и той може да се редактира или преглежда само в този домейн. Например mydomain-1.com няма достъп до localStorage на вашия mydomain-2.com.

      Защо имам нужда от localStorage?

      LocalStorage е необходим само за едно нещо - да съхранява определени данни между потребителските сесии. Можете да се сетите за хиляда и едно неща, които могат да се съхраняват в локалното хранилище на браузъра. Например браузър игри, които го използват като запазване или запис на момента, в който потребителят е спрял, докато гледа видео, различни данни за формуляри и др.

      Как да започна с localStorage?

      Много просто.

      Работата с localStorage е много подобна на работата с обекти в JavaScript. Има няколко метода за работа с него.

      localStorage.setItem("ключ", "стойност")

      Метод, който добавя към localStorage нов ключсъс стойност (и ако такъв ключ вече съществува, той го презаписва с нова стойност). Пишем например localStorage.setItem('myKey', 'myValue');

      localStorage.getItem("ключ")

      Взимаме определена стойност от хранилището по ключ.

      localStorage.removeItem("Ключ")

      Изтрийте ключа

      localStorage.clear()

      Изчистване на цялото хранилище

      Сега можете да отворите раздел с localStorage на вашия браузър и да се упражнявате сами да пишете и извличате данни от това хранилище. Ако не друго, ние записваме целия код в js файл.

      //Добавяне или промяна на стойността: localStorage.setItem("myKey", "myValue"); //сега имате ключа "myKey" със стойността "myValue", съхранена в localStorage //Отпечатайте го в конзолата: var localValue = localStorage.getItem("myKey"); console.log(localValue); //"myValue" //изтриване: localStorage.removeItem("myKey"); //изчистване на цялото хранилище localStorage.clear() Същото, но с квадратни скоби: localStorage["Key"] = "Value" //задаване на стойността на localStorage["Key"] //Получаване на стойността delete localStorage["Key" ] // Изтриване на стойност

      Също така искам да отбележа, че localStorage работи чудесно с вложени структури, като обекти.

      //създайте обект var obj = ( item1: 1, item2: , item3:"hello"); var serialObj = JSON.stringify(obj); //сериализира го localStorage.setItem("myKey", serialObj); //запишете го в хранилището чрез ключа "myKey" var returnObj = JSON.parse(localStorage.getItem("myKey")) //анализирайте го обратно в обект

      Трябва също да сте наясно, че браузърите отделят 5MB за localStorage. И ако го превишите, ще получите изключение QUOTA_EXCEEDED_ERR. Между другото, с негова помощ можете да проверите дали все още има място в хранилището ви.

      Опитайте ( localStorage.setItem("key", "value"); ) catch (e) ( if (e == QUOTA_EXCEEDED_ERR) ( alert("Limit exceeded"); ) )

      Вместо заключение

      Бих искал разработчиците да направят просто заключение от тази кратка статия за себе си тази технологиявече с мощ и основно може да се използва във вашите проекти. Има добра стандартизация и отлична поддръжка, която се развива само с течение на времето.