LocalStorageFlask
LocalStorageFlask là một thư viện dành cho Flask giúp bạn dễ dàng thao tác với localStorage trong trình duyệt người dùng từ phía server. Thư viện này hỗ trợ các lệnh để lưu trữ, truy xuất và xóa dữ liệu trong localStorage.
Cài đặt
Để cài đặt LocalStorageFlask, bạn có thể cài đặt thư viện từ PyPI bằng lệnh sau:
pip install localstorage_flask
Cách sử dụng
Mã Python (Flask)
Đầu tiên, bạn cần khởi tạo một ứng dụng Flask và sử dụng thư viện LocalStorageFlask.
from flask import Flask, render_template
from localstorage_flask import LocalStorageFlask
app = Flask(__name__)
localstorage = LocalStorageFlask(app)
@app.route("/")
def index():
localstorage.setItem("username", "currentUser")
localstorage.setItem("theme", "dark")
username = localstorage.getItem("username", "username")
theme = localstorage.getItem("theme", "theme")
return render_template("index.html")
if __name__ == "__main__":
app.run(debug=True)
Mã HTML Template
Trong mã HTML này, bạn có thể tương tác với localStorage và hiển thị dữ liệu từ localStorage sau khi lấy từ Flask.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LocalStorage Example</title>
</head>
<body>
<h1>Welcome to LocalStorageFlask</h1>
<p>Open the browser's console to see localStorage operations in action.</p>
<h2>LocalStorage Data:</h2>
<p id="username">Username: </p>
<p id="theme">Theme: </p>
<button id="fetchDataBtn">Fetch LocalStorage Data</button>
<script>
document.getElementById("fetchDataBtn").addEventListener("click", function() {
document.getElementById("username").innerText = "Username: " + username;
document.getElementById("theme").innerText = "Theme: " + theme;
});
</script>
</body>
</html>
Các lệnh để tương tác với localStorage
Dưới đây là các lệnh mà bạn có thể sử dụng để tương tác với localStorage thông qua thư viện LocalStorageFlask.
- Lưu trữ dữ liệu vào localStorage
Sử dụng lệnh sau để lưu trữ dữ liệu vào localStorage:
localstorage.setItem("key", "value")
key: Tên của mục bạn muốn lưu.
value: Giá trị bạn muốn lưu trữ.
3. Lấy dữ liệu từ localStorage
Để lấy dữ liệu từ localStorage, sử dụng lệnh sau:
localstorage.getItem("key", "variable_name")
key: Tên của mục mà bạn muốn lấy dữ liệu.
variable_name: Tên biến JavaScript sẽ chứa giá trị của mục đã lấy.
3. Xóa mục khỏi localStorage
Để xóa một mục khỏi localStorage, sử dụng lệnh sau:
localstorage.removeItem("key")
key: Tên của mục bạn muốn xóa.
4. Xóa toàn bộ dữ liệu trong localStorage
Sử dụng lệnh sau để xóa toàn bộ dữ liệu trong localStorage:
localstorage.clear()
Kết luận
LocalStorageFlask giúp bạn dễ dàng thao tác với localStorage trong các ứng dụng Flask. Các lệnh trên cho phép bạn lưu trữ, lấy và xóa dữ liệu từ localStorage mà không cần phải phụ thuộc vào cơ sở dữ liệu.