47. Web Storage Trong HTML

Web Storage trong HTML: Web Storage API trong HTML cung cấp một cách để lưu trữ dữ liệu trực tiếp trên trình duyệt của người dùng. Điều này cho phép bạn lưu trữ thông tin tạm thời hoặc lâu dài để duy trì trạng thái của ứng dụng web mà không cần gửi dữ liệu đến máy chủ. Web Storage API bao gồm hai loại lưu trữ: Local Storage và Session Storage.

Local Storage: Dữ liệu được lưu trữ trong Local Storage sẽ tồn tại sau khi bạn đóng trình duyệt và mở lại trang web. Dữ liệu này sẽ tồn tại cho đến khi bạn xóa nó hoặc thông qua việc xóa lịch sử duyệt web.
Session Storage: Dữ liệu được lưu trữ trong Session Storage chỉ tồn tại trong phiên làm việc hiện tại của trình duyệt. Khi bạn đóng trình duyệt hoặc mở một tab mới, dữ liệu Session Storage sẽ bị xóa.

Dưới đây là một ví dụ về cách sử dụng Local Storage và Session Storage:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Storage Example</title>
</head>
<body>
    <h1>Web Storage Example</h1>
    
    <input type="text" id="textInput">
    <button id="saveButton">Save</button>
    <div id="output"></div>
    
    <script>
        const textInput = document.getElementById("textInput");
        const saveButton = document.getElementById("saveButton");
        const output = document.getElementById("output");
        
        saveButton.addEventListener("click", function() {
            const inputText = textInput.value;
            localStorage.setItem("userInput", inputText);
            output.textContent = "Saved: " + inputText;
        });
        
        const savedText = localStorage.getItem("userInput");
        if (savedText) {
            output.textContent = "Saved: " + savedText;
        }
    </script>
</body>
</html>

Trong ví dụ trên:

Chúng ta sử dụng localStorage để lưu trữ và truy xuất dữ liệu từ Local Storage.
Thuộc tính setItem() để lưu dữ liệu vào Local Storage.
getItem() để truy xuất dữ liệu từ Local Storage.
Tương tự, bạn có thể sử dụng sessionStorage để thao tác với Session Storage.

Lưu ý rằng Web Storage chỉ cho phép lưu trữ dữ liệu dưới dạng chuỗi. Để lưu trữ các đối tượng phức tạp, bạn cần thực hiện chuyển đổi dữ liệu sang dạng chuỗi trước khi lưu và chuyển đổi lại sau khi truy xuất.

Leave a Comment Cancel Reply