2014-04-17 12 views
6

Tôi đã tạo đối tượng JavaScript.Giá trị hiện tại trong đối tượng JavaScript trên làm mới trình duyệt

var myObj = {}; 

Bây giờ khi người dùng chơi xung quanh với ứng dụng, chúng tôi gán một số giá trị cho đối tượng này.

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

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

Nhưng bất cứ khi nào làm mới trang, đối tượng sẽ mất giá trị của nó.

Có cách nào sử dụng HTML 5 \ hoặc bất kỳ kỹ thuật nào khác để duy trì các giá trị này trong quá trình làm mới trang hay không.

+0

đó là tất cả về cookie !!! –

+1

Lưu ý phụ: Cách khác để viết 'obj ['Name']' là 'obj.Name'. Miễn là tên thuộc tính phù hợp với yêu cầu của tên mã nhận diện JavaScript (không thể có dấu cách hoặc một số ký tự khác, phải bắt đầu bằng chữ cái, v.v.), bạn có thể sử dụng ký hiệu chấm. Đối với các tên thuộc tính có dấu cách, v.v. hoặc bắt đầu bằng một cái gì đó không phải là chữ cái, thì bạn cần phải sử dụng ký hiệu được gắn ngoặc. –

Trả lời

12

Có, bạn có hai lựa chọn chính:

  1. Sử dụng cookie. Cookie rất dễ dàng để đặt từ JavaScript, nhưng hơi khó đọc. Bạn đã nói bạn đang sử dụng jQuery; có một số plugin jQuery giúp cookie trở nên dễ dàng hơn nhiều, nếu bạn tìm kiếm "plugin cookie jquery", bạn sẽ tìm thấy chúng.

  2. Sử dụng web storage, là supported by all major browsers, even IE8. Bạn có hai lựa chọn: bộ nhớ "Phiên" chỉ kéo dài cho bộ nhớ "phiên" và "cục bộ" này cho đến khi người dùng xóa bộ nhớ hoặc trình duyệt quyết định cần có chỗ cho thứ khác.

Đó Lựa chọn thứ hai là khá dễ sử dụng, bạn có thể lưu trữ những thứ sử dụng chuỗi định dạng JSON (đối tượng JSON cũng là supported by all major browsers):

Lưu trữ đối tượng của bạn:

localStorage.yourObject = JSON.stringify(obj); 

lấy đối tượng của bạn (ví dụ, khi tải trang), hoặc một đối tượng trống nếu có của không lưu trữ:

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

Ở trên, localStorage là một variabl (và triển khai cơ bản) do trình duyệt cung cấp để lưu trữ cục bộ. Thay vào đó, bạn có thể sử dụng sessionStorage nếu muốn lưu trữ phiên.

Dưới đây là một địa phương hoàn thành ví dụ lưu trữ: 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> 
Các vấn đề liên quan