Cách sử dụng localStorage trong JavaScript
Cơ chế localStorage cung cấp một loại đối tượng lưu trữ web cho phép bạn lưu trữ và truy xuất dữ liệu trong trình duyệt. Bạn có thể lưu trữ và truy cập dữ liệu mà không bị hết hạn sử dụng; dữ liệu sẽ có sẵn ngay cả sau khi khách truy cập đóng trang web của bạn.
Thông thường, bạn sẽ truy cập localStorage bằng JavaScript. Với một lượng nhỏ mã, bạn có thể xây dựng một dự án mẫu, giống như một bộ đếm điểm. Điều này sẽ cho thấy cách bạn có thể lưu trữ và truy cập dữ liệu liên tục chỉ bằng cách sử dụng mã phía máy khách.
Mục Lục
LocalStorage trong JavaScript là gì?
Đối tượng localStorage là một phần của API lưu trữ web mà hầu hết các trình duyệt web đều hỗ trợ. Bạn có thể lưu trữ dữ liệu dưới dạng các cặp khóa-giá trị bằng localStorage. Các khóa và giá trị duy nhất phải ở định dạng Chuỗi DOM UTF-16.
Nếu bạn muốn lưu trữ các đối tượng hoặc mảng, bạn sẽ phải chuyển đổi chúng thành chuỗi bằng cách sử dụng JSON.stringify () phương pháp. Bạn có thể lưu trữ tối đa 5MB dữ liệu trong localStorage. Ngoài ra, tất cả các cửa sổ có cùng nguồn gốc có thể chia sẻ dữ liệu localStorage của trang web đó.
Trình duyệt sẽ không xóa dữ liệu này ngay cả khi người dùng đóng nó. Nó sẽ có sẵn cho trang web đã tạo nó trong bất kỳ phiên nào trong tương lai. Tuy nhiên, bạn không nên sử dụng localStorage cho dữ liệu nhạy cảm vì các tập lệnh khác chạy trên cùng một trang có thể truy cập nó.
localStorage so với sessionStorage
Các đối tượng localStorage và sessionStorage là một phần của Web Storage API lưu trữ cục bộ các cặp khóa-giá trị. Tất cả các trình duyệt hiện đại đều hỗ trợ cả hai. Với localStorage, dữ liệu không hết hạn ngay cả sau khi người dùng đóng trình duyệt của họ. Điều này khác với sessionStorage xóa dữ liệu khi phiên trang kết thúc. Phiên trang kết thúc khi bạn đóng một tab hoặc cửa sổ.
Mã được sử dụng trong dự án này có sẵn trong kho lưu trữ GitHub và miễn phí cho bạn sử dụng theo giấy phép MIT. Nếu bạn muốn xem phiên bản trực tiếp của dự án bộ đếm điểm, bạn có thể xem bản demo trực tiếp.
LocalStorage hoạt động như thế nào?
Bạn có thể truy cập chức năng localStorage thông qua Window.localStorage tài sản. Thuộc tính này cung cấp một số phương thức như setItem (), getItem () và removeItem (). Bạn có thể sử dụng chúng để lưu trữ, đọc và xóa các cặp khóa / giá trị.
Cách lưu trữ dữ liệu trong localStorage
Bạn có thể lưu trữ dữ liệu trong localStorage bằng cách sử dụng thiết lập các mục() phương pháp. Phương thức này chấp nhận hai đối số, khóa và giá trị tương ứng.
window.localStorage.setItem('Python', 'Guido van Rossum');Nơi đây, Python là chìa khóa và Guido van Rossum là giá trị. Nếu bạn muốn lưu trữ một mảng hoặc một đối tượng, bạn sẽ phải chuyển đổi nó thành một chuỗi. Bạn có thể chuyển đổi một mảng hoặc một đối tượng thành một chuỗi bằng cách sử dụng JSON.stringify () phương pháp.
window.localStorage.setItem('Python', 'Guido van Rossum');const student = {
name: "Yuvraj",
marks: 85,
subject: "Machine Learning"
}
const scores = [76, 77, 34, 67, 88];
window.localStorage.setItem('result', JSON.stringify(student));
window.localStorage.setItem('marks', JSON.stringify(scores));
Cách đọc dữ liệu từ localStorage
Bạn có thể đọc dữ liệu từ localStorage bằng cách sử dụng getItem () phương pháp. Phương thức này chấp nhận khóa dưới dạng tham số và trả về giá trị dưới dạng chuỗi.
let data1 = window.localStorage.getItem('Python');
let data2 = window.localStorage.getItem('result');console.log(data1);
console.log(data2);
Điều này tạo ra kết quả sau:
Guido van Rossum
{"name":"Yuvraj","marks":85,"subject":"Machine Learning"}Nếu bạn muốn chuyển đổi kết quả từ một chuỗi thành một đối tượng, bạn nên sử dụng JSON.parse () phương pháp.
let data2 = JSON.parse(window.localStorage.getItem('result'));
console.log(data2);Cách xóa phiên lưu trữ cục bộ
Bạn có thể xóa các phiên localStorage bằng cách sử dụng loại bỏ mục() phương pháp. Bạn cần chuyển khóa làm tham số cho phương thức này để xóa cặp khóa-giá trị. Nếu khóa tồn tại, phương thức sẽ xóa cặp khóa-giá trị và nếu khóa không tồn tại, phương thức sẽ không làm gì cả.
window.localStorage.removeItem('Python');
window.localStorage.removeItem('C++');Cách xóa tất cả các mục trong localStorage
Bạn có thể xóa tất cả các mục trong bộ nhớ cục bộ bằng cách sử dụng xa lạ() phương pháp. Bạn không cần phải truyền bất kỳ tham số nào cho phương thức này.
window.localStorage.clear();Cách tìm độ dài của localStorage
Bạn có thể tìm độ dài của localStorage bằng cách sử dụng localStorage.length tài sản.
let len = localStorage.length;
console.log(len);Làm thế nào để lấy chìa khóa ở một vị trí nhất định
Bạn có thể lấy chìa khóa ở một vị trí nhất định bằng cách sử dụng Chìa khóa() phương pháp. Phương thức này chấp nhận chỉ mục như một tham số.
let d = localStorage.key(1);
console.log(d);Phương thức key () chủ yếu được sử dụng để lặp qua tất cả các mục trong localStorage.
Làm thế nào để lặp qua tất cả các mục trong localStorage
Bạn có thể lặp lại tất cả các mục trong localStorage bằng vòng lặp for.
for (let i = 0; i < localStorage.length; i++){
let key = localStorage.key(i);
let value = localStorage.getItem(key);
console.log(key, value);
}Phương thức key () chấp nhận chỉ mục như một đối số và trả về khóa tương ứng. Phương thức getItem () chấp nhận khóa làm đối số và trả về giá trị tương ứng. Cuối cùng, console.log () phương thức in cặp khóa-giá trị.
Dự án JavaScript đơn giản dựa trên localStorage
Với sự hiểu biết về các phương pháp cơ bản của nó, bạn có thể phát triển một dự án JavaScript đơn giản dựa trên localStorage. Trong dự án này, bạn sẽ tạo một ứng dụng đếm điểm sẽ tăng và giảm số điểm theo một lần nhấp vào nút. Ngoài ra, bạn sẽ triển khai chức năng xóa tất cả các mục trong localStorage.
Tạo ra một index.html và script.js tệp trong một thư mục mới và mở tệp trong trình chỉnh sửa mã yêu thích của bạn. Sử dụng mã HTML sau để tạo giao diện cho ứng dụng đếm điểm:
<!DOCTYPE html>
<html>
<body>
<h1>localStorage in JavaScript</h1>
<button onclick="increaseCounter()" type="button">Increase Score</button>
<button onclick="decreaseCounter()" type="button">Decrease Score</button>
<button onclick="clearCounter()" type="button">Clear localStorage</button>
<p>Score:</p>
<p id="score"></p>
<p>Click on the "Increase Score" button to increase the score count</p>
<p>Click on the "Decrease Score" button to decrease the score count</p>
<p>Click on the "Clear localStorage" button to clear the localStorage</p>
<p>
You can close the browser tab (or window), and try again.
You'll see that the data still persists and is not lost even after closing
the browser.
</p>
<script src="script.js"> </script>
</body>
</html>
Trang này có ba nút: Tăng điểm, Giảm điểmvà Xóa localStorage. Các nút này gọi tăngCounter (), ReduceCounter ()và clearCounter () các chức năng tương ứng. Sử dụng mã sau để thêm chức năng vào ứng dụng đếm điểm bằng JavaScript.
function increaseCounter() {
var count = Number(window.localStorage.getItem("count"));
count += 1;
window.localStorage.setItem("count", count);
document.getElementById("score").innerHTML = count;
}Các tăngCounter () hàm lấy số đếm bằng phương thức getItem (). Nó chuyển đổi kết quả thành Số, vì getItem () trả về một chuỗi và lưu trữ nó trong biến count.
Lần đầu tiên bạn nhấp vào Tăng điểm sẽ có trước bất kỳ lệnh gọi nào đến setItem (). Trình duyệt của bạn sẽ không tìm thấy đếm key trong localStorage, vì vậy nó sẽ trả về giá trị null. Vì hàm Number () trả về 0 cho đầu vào null nên nó không cần xử lý trường hợp đặc biệt nào. Mã có thể tăng giá trị đếm một cách an toàn trước khi lưu trữ và cập nhật tài liệu để hiển thị giá trị mới.
function decreaseCounter() {
var count = Number(window.localStorage.getItem("count"));
count -= 1;
window.localStorage.setItem("count", count);
document.getElementById("score").innerHTML = count;
}Các ReduceCounter () chức năng truy xuất và kiểm tra dữ liệu giống như tăngCounter () làm. Nó làm giảm đếm biến bằng 1, mặc định là 0.
function clearCounter() {
window.localStorage.clear();
document.getElementById("score").innerHTML = "";
}Cuối cùng, clearCounter () hàm xóa tất cả dữ liệu khỏi localStorage bằng cách sử dụng xa lạ() phương pháp.
Làm được nhiều việc hơn với localStorage
Đối tượng localStorage có một số phương thức bao gồm setItem (), getItem (), removeItem () và clear (). Mặc dù localStorage dễ sử dụng, nhưng không an toàn khi lưu trữ thông tin nhạy cảm. Nhưng đó là một lựa chọn tốt để phát triển các dự án không yêu cầu nhiều dung lượng lưu trữ và không liên quan đến bất kỳ thông tin nhạy cảm nào.
Bạn muốn xây dựng một dự án JavaScript dựa trên localStorage khác? Đây là một ứng dụng danh sách việc cần làm cơ bản mà bạn có thể phát triển bằng cách sử dụng HTML, CSS và JavaScript.