Hướng dẫn which html has local storage? - html nào có bộ nhớ cục bộ?

Question

Lưu trữ web HTML; Tốt hơn cookie.

Nội dung chính Show

Lưu trữ web HTML là gì?
Hỗ trợ trình duyệt
Các đối tượng lưu trữ web HTML
Đối tượng địa phương
Ví dụ giải thích:
Ngoại lệ
Sự mô tả
Thông số kỹ thuật
Tính tương thích của trình duyệt web
HTML 4 có lưu trữ cục bộ không?
Bạn có thể lưu trữ HTML trong bộ nhớ cục bộ không?
HTML lưu trữ cục bộ là gì?
Làm cách nào để kiểm tra lưu trữ cục bộ trong HTML?

Lưu trữ web HTML là gì?

Với lưu trữ web, các ứng dụng web có thể lưu trữ dữ liệu cục bộ trong trình duyệt của người dùng.

Trước HTML5, dữ liệu ứng dụng phải được lưu trữ trong cookie, bao gồm trong mọi yêu cầu của máy chủ. Lưu trữ web an toàn hơn và một lượng lớn dữ liệu có thể được lưu trữ cục bộ, mà không ảnh hưởng đến hiệu suất trang web.

Không giống như cookie, giới hạn lưu trữ lớn hơn nhiều (ít nhất 5MB) và thông tin không bao giờ được chuyển đến máy chủ.

Lưu trữ web là trên mỗi nguồn gốc (trên mỗi miền và giao thức). Tất cả các trang, từ một nguồn gốc, có thể lưu trữ và truy cập cùng một dữ liệu.

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ lưu trữ web.

API
Lưu trữ web	4.0	8.0	3.5	4.0	11.5

Các đối tượng lưu trữ web HTML

HTML Web Storage cung cấp hai đối tượng để lưu trữ dữ liệu trên máy khách:

window.localStorage - Lưu trữ dữ liệu không hết hạn
window.sessionStorage - Lưu trữ dữ liệu cho một phiên (dữ liệu bị mất khi Tab Trình duyệt được đóng)

Trước khi sử dụng lưu trữ web, hãy kiểm tra hỗ trợ trình duyệt cho LocalStorage và SessionStorage:

if (typeof (lưu trữ)! == "không xác định") {& nbsp; // Mã cho LocalStorage/SessionStorage. } khác {& nbsp; // Xin lỗi! Không có hỗ trợ lưu trữ web ..}
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}

Đối tượng địa phương

Đối tượng LocalStorage lưu trữ dữ liệu không có ngày hết hạn. Dữ liệu sẽ không bị xóa khi trình duyệt được đóng và sẽ có sẵn vào ngày hôm sau, tuần hoặc năm.

Thí dụ

// storelocalStorage.setItem ("LastName", "Smith");
localStorage.setItem("lastname", "Smith");

// truy xuất tài liệu.getEuityById ("result"). InnerHtml = localStorage.getItem ("lastName");
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Hãy tự mình thử »

Ví dụ giải thích:

Tạo một cặp tên/giá trị địa phương với name = "lastName" và value = "smith"
Lấy giá trị của "lastName" và chèn nó vào phần tử bằng id = "kết quả"

Ví dụ trên cũng có thể được viết như thế này:

// storelocalStorage.lastName = "smith"; // truy xuất tài liệu.getelementById ("result"). Innerhtml = localStorage.lastName;
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;

Cú pháp để loại bỏ mục "LastName" LocalStorage như sau:

LocalStorage.RemoveItem ("LastName");

Lưu ý: Các cặp tên/giá trị luôn được lưu trữ dưới dạng chuỗi. Hãy nhớ chuyển đổi chúng sang định dạng khác khi cần thiết! Name/value pairs are always stored as strings. Remember to convert them to another format when needed!

Ví dụ sau đếm số lần người dùng đã nhấp vào một nút. Trong mã này, chuỗi giá trị được chuyển đổi thành một số để có thể tăng bộ đếm:

Thí dụ

// storelocalStorage.setItem ("LastName", "Smith");
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " time(s).";

Hãy tự mình thử »

Ví dụ giải thích:

Tạo một cặp tên/giá trị địa phương với name = "lastName" và value = "smith"except that it stores the data for only one session. The data is deleted when the user closes the specific browser tab.

Lấy giá trị của "lastName" và chèn nó vào phần tử bằng id = "kết quả"

Thí dụ

// storelocalStorage.setItem ("LastName", "Smith");
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";

Hãy tự mình thử »

Thuộc tính chỉ đọc localStorage của giao diện window cho phép bạn truy cập một đối tượng Storage cho nguồn gốc của ____ 9; Dữ liệu được lưu trữ được lưu trên các phiên trình duyệt.localStorage read-only property of the window interface allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions.

localStorage tương tự như sessionStorage, ngoại trừ trong khi dữ liệu localStorage không có thời gian hết hạn, dữ liệu sessionStorage sẽ bị xóa khi phiên trang kết thúc - nghĩa là khi trang được đóng. .

Giá trị

Một đối tượng Storage có thể được sử dụng để truy cập vào không gian lưu trữ cục bộ của nguồn gốc hiện tại.

Ngoại lệ

const cat = localStorage.getItem('myCat');

6

Bị ném vào một trong những trường hợp sau:

Nguồn gốc không phải là một sơ đồ hợp lệ/máy chủ/port tuple. Điều này có thể xảy ra nếu nguồn gốc sử dụng các sơ đồ
```
const cat = localStorage.getItem('myCat');
```
7 hoặc
```
const cat = localStorage.getItem('myCat');
```
8 chẳng hạn.
Yêu cầu vi phạm quyết định chính sách. Ví dụ: người dùng đã cấu hình các trình duyệt để ngăn trang dữ liệu tồn tại.

Lưu ý rằng nếu người dùng chặn cookie, các trình duyệt có thể sẽ diễn giải đây như một hướng dẫn để ngăn trang không thể tồn tại.

Sự mô tả

Các khóa và các giá trị được lưu trữ với localStorage luôn ở định dạng chuỗi UTF-16, sử dụng hai byte trên mỗi ký tự. Cũng như các đối tượng, các khóa số nguyên được tự động chuyển đổi thành chuỗi.

localStorage Dữ liệu dành riêng cho giao thức của tài liệu. Cụ thể, đối với một trang web được tải qua HTTP (ví dụ:

localStorage.removeItem('myCat');

1), localStorage trả về một đối tượng khác với localStorage cho trang web tương ứng được tải qua HTTPS (ví dụ:

localStorage.removeItem('myCat');

4).is specific to the protocol of the document. In particular, for a site loaded over HTTP (e.g.,

localStorage.removeItem('myCat');

1), localStorage returns a different object than localStorage for the corresponding site loaded over HTTPS (e.g.,

localStorage.removeItem('myCat');

4).

Đối với các tài liệu được tải từ URL

const cat = localStorage.getItem('myCat');

7 (nghĩa là các tệp được mở trong trình duyệt trực tiếp từ hệ thống tập tin cục bộ của người dùng, thay vì được phục vụ từ máy chủ web) các yêu cầu đối với hành vi localStorage không được xác định và có thể thay đổi giữa các trình duyệt khác nhau.

Trong tất cả các trình duyệt hiện tại, localStorage dường như trả về một đối tượng khác nhau cho mỗi URL

const cat = localStorage.getItem('myCat');

7. Nói cách khác, mỗi URL

const cat = localStorage.getItem('myCat');

7 dường như có khu vực lưu trữ địa phương độc đáo của riêng mình. Nhưng không có gì đảm bảo về hành vi đó, vì vậy bạn không nên dựa vào nó bởi vì, như đã đề cập ở trên, các yêu cầu đối với các URL

const cat = localStorage.getItem('myCat');

7 vẫn chưa được xác định. Vì vậy, có thể các trình duyệt có thể thay đổi xử lý URL

const cat = localStorage.getItem('myCat');

7 của họ cho localStorage bất cứ lúc nào. Trong thực tế, một số trình duyệt đã thay đổi xử lý của họ cho nó theo thời gian.

Ví dụ

Đoạn trích sau đây truy cập vào đối tượng Storage cục bộ của miền hiện tại và thêm mục dữ liệu vào nó bằng window.localStorage4.

localStorage.setItem('myCat', 'Tom');

Cú pháp để đọc mục localStorage như sau:

const cat = localStorage.getItem('myCat');

Cú pháp để loại bỏ mục localStorage như sau:

localStorage.removeItem('myCat');

Cú pháp để loại bỏ tất cả các mục localStorage như sau:

Thông số kỹ thuật

Sự chỉ rõ
Tiêu chuẩn HTML # Dom-LocalStorage-DEV # dom-localstorage-dev

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Xem thêm

HTML 4 có lưu trữ cục bộ không?

Ví dụ lưu trữ phiên HTML5 Lưu trữ cục bộ và phiên không được hỗ trợ trong các trình duyệt dựa trên HTML4.Nhưng chúng ta có thể sử dụng cookie thay vì trên các trình duyệt dựa trên HTML4 như IE 8 trở xuống.Html5 Local and Session Storage are not supported in HTML4 based Browsers. But we can use cookies instead on html4 based browsers like IE 8 and below.

Bạn có thể lưu trữ HTML trong bộ nhớ cục bộ không?

Lưu HTML vào LocalStorage # Thuộc tính bên trong trả về HTML bên trong một phần tử dưới dạng chuỗi, điều này làm cho nó trở thành cách hoàn hảo để chúng tôi có được và lưu trữ danh sách của chúng tôi.Hãy tự động lưu danh sách người dùng mỗi khi họ thêm một mục vào nó.Bạn sử dụng phương thức LocalStorage.setItem () để lưu dữ liệu vào LocalStorage.You use the localStorage. setItem() method to save data to localStorage .

HTML lưu trữ cục bộ là gì?

Đối tượng LocalStorage lưu trữ dữ liệu không có ngày hết hạn.Dữ liệu sẽ không bị xóa khi trình duyệt được đóng và sẽ có sẵn vào ngày hôm sau, tuần hoặc năm.stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

Làm cách nào để kiểm tra lưu trữ cục bộ trong HTML?

Để có được các mục từ LocalStorage, hãy sử dụng phương thức getItem ().getItem () cho phép bạn truy cập dữ liệu được lưu trữ trong đối tượng LocalStorage của trình duyệt.use the getItem() method. getItem() allows you to access the data stored in the browser's localStorage object.