2014-04-17 15 views
6

Utworzono obiekt JavaScript.Trwałe wartości w obiekcie JavaScript przy odświeżaniu przeglądarki

var myObj = {}; 

Teraz, gdy użytkownik przegląda aplikację, przypisujemy pewne wartości do tego obiektu.

myObj['Name'] = 'Mr. Gates'; 
myObj['Age'] = 58; 

... 
... 
... 
myObj['Role'] = 'CEO'; 

Ale po odświeżeniu strony obiekt traci swoje wartości.

Czy istnieje sposób użycia HTML 5 \ lub jakiejkolwiek innej techniki do utrwalenia tych wartości przez odświeżenie strony.

+0

to wszystko o ciasteczka !!! –

+1

Nota boczna: Innym sposobem na napisanie 'obj ['Name']' jest 'obj.Name'. Dopóki nazwa właściwości odpowiada wymaganiom nazwy identyfikatora JavaScript (nie może zawierać spacji lub innych znaków, musi zaczynać się od litery itp.), Można użyć notacji kropkowej. W przypadku nazw właściwości zawierających spacje itp. Lub rozpoczynających się od czegoś innego niż litera, należy użyć notacji nawiasowej. –

Odpowiedz

12

Tak, masz dwie główne możliwości:

  1. Korzystanie cookie. Pliki cookie są łatwe do zestaw z JavaScript, ale trochę bólu do czytania. Powiedziałeś, że używasz jQuery; istnieje kilka wtyczek jQuery, dzięki którym ciasteczka są o wiele łatwiejsze, jeśli wyszukasz "wtyczkę jquery cookie", znajdziesz je.

  2. Używanie web storage, która jest supported by all major browsers, even IE8. Masz dwie możliwości: magazyn "sesji", który działa tylko w przypadku tej "sesji" i "lokalnej" pamięci, która trwa do momentu, gdy użytkownik ją wyczyści lub przeglądarka zadecyduje, że potrzebuje tego miejsca na coś innego.

Ta druga opcja jest dość łatwy w użyciu, można przechowywać rzeczy za pomocą JSON-sformatowane ciągów (obiekt JSON jest również supported by all major browsers):

Przechowywanie obiektu:

localStorage.yourObject = JSON.stringify(obj); 

Odzyskiwanie obiekt (na przykład po wczytaniu strony) lub pusty obiekt, jeśli go nie ma:

obj = JSON.parse(localStorage.yourObject || "{}"); 

W powyższym przykładzie localStorage jest zmienną (i podstawową implementacją) udostępnianą przez przeglądarkę dla magazynu lokalnego. Zamiast tego możesz użyć sessionStorage, jeśli chcesz przechowywać sesję.

Oto pełna lokalny przykład przechowywanie: Live Copy

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<meta charset=utf-8 /> 
<title>Local Storage</title> 
</head> 
<body> 
    <label><code>Name</code> property for our object: 
    <input type="text" id="txtName"> 
    </label> 
    <script> 
    (function() { 
     var txtName = $("#txtName"); 
     var obj = JSON.parse(localStorage.yourObject || '{"Name": ""}'); 
     txtName.val(obj.Name); 
     // This is obviously hyperactive: 
     txtName.on("change keypress keyup blur paste click", function() { 
     obj.Name = txtName.val(); 
     localStorage.yourObject = JSON.stringify(obj); 
     }); 
    })(); 
    </script> 
</body> 
</html> 
Powiązane problemy