Hướng dẫn how do i store data from html to local storage? - làm cách nào để lưu trữ dữ liệu từ html sang 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
Chúng ta có thể sử dụng LocalStorage trong HTML không?
Dữ liệu lưu trữ cục bộ HTML là gì?
HTML có hỗ trợ lưu trữ ngoại tuyến không?
Dữ liệu được lưu trữ trong tệp HTML như thế nào?

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

Chúng ta có thể sử dụng LocalStorage trong HTML không?

LocalStorage dưới dạng một loại lưu trữ web là một đặc tả HTML5. Nó được hỗ trợ bởi các trình duyệt chính bao gồm IE8. Để chắc chắn trình duyệt hỗ trợ LocalStorage, bạn có thể kiểm tra bằng đoạn trích sau: IF (typeof (lưu trữ)! ==. It is supported by major browsers including IE8. To be sure the browser supports localStorage , you can check using the following snippet: if (typeof(Storage) !==

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

LocalStorage là gì?LocalStorage cho phép các ứng dụng web lưu trữ dữ liệu cục bộ trong trình duyệt của người dùng mà không cần 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 khi trình duyệt được mở lại.

HTML có hỗ trợ lưu trữ ngoại tuyến không?

Các ứng dụng web ngoại tuyến có sẵn thông qua API ứng dụng web ngoại tuyến HTML mới, còn được gọi là bộ đệm ứng dụng HTML.Ngoài việc chỉ cần phục vụ các trang cho người dùng khi không có kết nối Internet, thường là ứng dụng ngoại tuyến yêu cầu lưu trữ thông tin của người dùng.. Beyond simply serving pages to the user when an Internet connection is unavailable, often an offline application requires storage of user's information.

Dữ liệu được lưu trữ trong tệp HTML như thế nào?

HTML là ngôn ngữ đánh dấu - nó là cấu trúc của một trang web và không có cơ chế để lưu trữ hoặc xử lý dữ liệu động.Bạn sẽ phải sử dụng cookie JavaScript + ngôn ngữ phía máy khách hoặc ngôn ngữ phía máy chủ như PHP + MySQL.Lưu câu trả lời này.has no mechanisms for storing or processing dynamic data. You will have to use a client-side language JavaScript + cookies, or a server-side language like PHP + MySQL. Save this answer.