Учебники

HTML5 — Веб-хранилище

Август 22, 2018

HTML5 вводит два механизма, аналогичных куки-файлам HTTP-сессии, для хранения структурированных данных на стороне клиента и для преодоления следующих недостатков.

  • Куки-файлы включены в каждый HTTP-запрос, тем самым замедляя работу вашего веб-приложения, передавая те же данные.

  • Cookie-файлы включены в каждый HTTP-запрос, тем самым отправляя данные в незашифрованном виде через Интернет.

  • Размер файлов cookie ограничен примерно 4 КБ. Недостаточно для хранения необходимых данных.

Куки-файлы включены в каждый HTTP-запрос, тем самым замедляя работу вашего веб-приложения, передавая те же данные.

Cookie-файлы включены в каждый HTTP-запрос, тем самым отправляя данные в незашифрованном виде через Интернет.

Размер файлов cookie ограничен примерно 4 КБ. Недостаточно для хранения необходимых данных.

Два хранилища — это хранилище сеансов и локальное хранилище, и они будут использоваться для обработки различных ситуаций.

Последние версии почти каждого браузера поддерживают хранилище HTML5, включая Internet Explorer.

Хранение сессий

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

пример

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

HTML5 вводит атрибут sessionStorage, который будет использоваться сайтами для добавления данных в хранилище сеансов, и он будет доступен для любой страницы с того же сайта, открытого в этом окне, т. Е. Сеанса , и как только вы закроете окно, сессия будет потеряна.

Ниже приведен код, который установит переменную сеанса и получит доступ к этой переменной:

Live Demo

<!DOCTYPE HTML>

<html>
   <body>
      <script type = "text/javascript">
         
         if( sessionStorage.hits ) {
            sessionStorage.hits = Number(sessionStorage.hits) +1;
         } else {
            sessionStorage.hits = 1;
         }
         document.write("Total Hits :" + sessionStorage.hits );
      </script>
	
      <p>Refresh the page to increase number of hits.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

Это даст следующий результат —

Локальное хранилище

Локальное хранилище предназначено для хранилища, которое охватывает несколько окон и длится за пределами текущего сеанса. В частности, веб-приложения могут захотеть хранить мегабайты пользовательских данных, таких как целые авторские документы или почтовый ящик пользователя, на стороне клиента по соображениям производительности.

Опять же, cookie-файлы плохо обрабатывают этот случай, потому что они передаются с каждым запросом.

пример

HTML5 вводит атрибут localStorage, который будет использоваться для доступа к локальной области хранения страницы без ограничения по времени, и это локальное хранилище будет доступно всякий раз, когда вы будете использовать эту страницу.

Ниже приведен код, который будет устанавливать локальную переменную хранения и обращаться к ней каждый раз, когда к этой странице обращаются, даже в следующий раз, когда вы открываете окно —

Live Demo 

<!DOCTYPE HTML>

<html>
   <body>
      <script type = "text/javascript">
         
         if( localStorage.hits ) {
            localStorage.hits = Number(localStorage.hits) +1;
         } else {
            localStorage.hits = 1;
         }
         document.write("Total Hits :" + localStorage.hits );
      </script>
		
      <p>Refresh the page to increase number of hits.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

Это даст следующий результат —

Удалить веб-хранилище

Хранение конфиденциальных данных на локальном компьютере может быть опасным и может оставить дыру в безопасности.

Данные хранилища сеансов будут удалены браузерами сразу после завершения сеанса.

Чтобы очистить настройки локального хранилища, вам нужно вызвать localStorage.remove (‘key’) ; где ключ — это ключ значения, которое вы хотите удалить. Если вы хотите очистить все настройки, вам нужно вызвать метод localStorage.clear () .

Ниже приведен код, который очищает полное локальное хранилище:

Live Demo 

<!DOCTYPE HTML>

<html>
   <body>

      <script type = "text/javascript">
         localStorage.clear();

         // Reset number of hits.
         if( localStorage.hits ) {
            localStorage.hits = Number(localStorage.hits) +1;
         } else {
            localStorage.hits = 1;
         }
         document.write("Total Hits :" + localStorage.hits );
			
      </script>
		
      <p>Refreshing the page would not to increase hit counter.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

Это даст следующий результат —

43
Share: