Proud to be an engineer !: [HTML|JS|CSS] HTML5: Web storage

Do tej pory popularną metodą przechowywania danych po stronie klienckiej były tzw, cookies. Serwer wysyłał pewne informacje, zapisywane na komputerze klienta i odczytywał je przy ponownym uruchomieniu strony. Mechanizm ten jest nadal szeroko stosowany przy projektowaniu "spersonalizowanych" stron www. Wraz z nadejściem standardu HTML5 dostajemy alternatywę w postaci Web Storage. Funkcjonalność ta umożliwia składowanie danych po stronie klienckiej bez ingerencji serwera. Dodatkowo otrzymujemy znacznie więcej dostępnej pamięci. Wprowadzono dwa rodzaje Web storage, które udostępniają identyczne API dla programistów JS:

Local storage
Session storage

Oba obiekty to properties obiektu window, więc mamy do nich łatwy dostęp po stronie skryptowej. Różnica polega na tym, że o ile pamięć local storage jest trwała (tzn. musimy ją opróżniać konkretnym poleceniem), o tyle dane zapisane w session storage zostają utracone wraz z utratą sesji (15 minut bezczynności użytkownika, zamknięcie przeglądarki, zamknięcie karty itd).
Aby uruchomić funkcjonalność Web storage należy stronę wystawiać na serwerze (nie wystarczy otworzyć w przeglądarce dokumentu).

Poniżej prosty przykład wykorzystujący API Web storage. Zapis i odczyt można wykonywać na trzy sposoby:

localStorage[key] = value
localStorage.setItem(key,value)
localStorage.key = value

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Web storage</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
 <div>
  <h1>Local storage</h1>
  <span>Key: 
   <input type="text" id="lskey" />
  </span>
  <span>Value: 
   <input type="text" id="lsvalue" />
  </span>
  <span>
   <button id="lswrite">Write</button>
   <button id="lsread">Read</button>
   <button id="lsclear">Clear</button>
  </span>
 </div>
 <div>
  <h1>Session storage</h1>
  <span>Key: 
   <input type="text" id="sskey" />
  </span>
  <span>Value: 
   <input type="text" id="ssvalue" />
  </span>
  <span>
   <button id="sswrite">Write</button>
   <button id="ssread">Read</button>
   <button id="ssclear">Clear</button>
  </span>
 </div>
</body>
</html>

Obsługa API Web Storage:

$(function(){

 //local storage
 $('#lswrite').click(function(){
  var key = $('#lskey').val();
  var val = $('#lsvalue').val();
  localStorage.setItem(key,val);
 });

 $('#lsread').click(function(){
  var key = $('#lskey').val();
  $('#lsvalue').val(localStorage.getItem(key));
 });

 $('#lsclear').click(function(){
  var key = $('#lskey').val();
  var val = $('#lsvalue').val();
  if(!localStorage[key]){
   localStorage.clear();
  }
  else{
   localStorage[key] = "";
  }
 });

 //session storage
 $('#sswrite').click(function(){
  var key = $('#sskey').val();
  var val = $('#ssvalue').val();
  sessionStorage.setItem(key,val);
 });

 $('#ssread').click(function(){
  var key = $('#sskey').val();
  $('#ssvalue').val(sessionStorage.getItem(key));
 });

 $('#ssclear').click(function(){
  var key = $('#sskey').val();
  var val = $('#ssvalue').val();
  if(!sessionStorage[key]){
   sessionStorage.clear();
  }
  else{
   sessionStorage[key] = "";
  }
 });
});

piątek, 26 października 2012

[HTML|JS|CSS] HTML5: Web storage

Brak komentarzy:

Prześlij komentarz

Szukaj na tym blogu