Trong những ngày đầu của internet, bạn cần một máy chủ để lưu trữ dữ liệu. Nhưng ngày nay, thông qua LocalStorage, bạn có thể lưu trữ dữ liệu trên trình duyệt và ứng dụng mà không cần giao tiếp với máy chủ phụ trợ

Trong bài viết này, bạn sẽ tìm hiểu về các ứng dụng lý thuyết và thực tế của LocalStorage trong JavaScript

Hãy nói về lưu trữ web

Trước khi chúng tôi bắt đầu thỏa thuận thực sự, hãy xem định nghĩa về lưu trữ web. Lưu trữ web là một trong những tính năng tuyệt vời của HTML5 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

Hai hình thức lưu trữ web phổ biến nhất là LocalStorage và Session Storage. Sự khác biệt chính giữa hai hình thức lưu trữ web này là dữ liệu được lưu trong

//Storing objects in LocalStorage
const user = {
  name: "Mandy",
  age: 23,
};

localStorage.setItem("user-info", JSON.stringify(user));

//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));

1 không bao giờ rời khỏi trình duyệt và vẫn ở đó cho đến khi bạn xóa nó một cách rõ ràng. Ngược lại, dữ liệu được lưu trữ trong

//Storing objects in LocalStorage
const user = {
  name: "Mandy",
  age: 23,
};

localStorage.setItem("user-info", JSON.stringify(user));

//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));

2 sẽ bị xóa sau khi đóng tab/cửa sổ trình duyệt

Bộ nhớ cục bộ là gì?

Như đã đề cập trước đó, LocalStorage là một dạng lưu trữ web do trình duyệt cung cấp, 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ó ngày hết hạn. Tại đây, dữ liệu được lưu trữ sẽ vẫn khả dụng ngay cả khi bạn đóng tab/cửa sổ trình duyệt

Lưu ý rằng dữ liệu được lưu trữ trong LocalStorage chỉ được lưu trữ trên trình duyệt của người dùng trên thiết bị mà họ đã sử dụng để truy cập trang web. Do đó, người dùng không thể truy cập dữ liệu được lưu trữ nếu họ truy cập lại cùng một trang sau đó bằng một trình duyệt khác hoặc trên một thiết bị khác

Các trường hợp sử dụng LocalStorage

Sau đây trình bày một số trường hợp sử dụng hàng ngày của LocalStorage

1. Lưu trữ dữ liệu biểu mẫu được gửi một phần

Nếu người dùng điền vào một biểu mẫu dài trực tuyến, LocalStorage có thể là một tài nguyên hữu ích để lưu trữ thông tin đầu vào của người dùng. Trong trường hợp đó, ngay cả khi internet bị ngắt kết nối giữa lúc điền vào biểu mẫu và gửi biểu mẫu, người dùng sẽ không bị mất dữ liệu nhập và có thể tiếp tục từ nơi họ đã dừng lại

2. Bộ nhớ đệm

Bộ nhớ đệm đề cập đến việc lưu trữ dữ liệu, chẳng hạn như chi tiết đăng nhập trên thiết bị của người dùng để các yêu cầu về dữ liệu đó trong tương lai có thể được phục vụ nhanh hơn. Bạn có thể sử dụng LocalStorage để lưu trữ toàn bộ trang web để người dùng vẫn có thể truy cập trang web ngay cả khi họ ngoại tuyến

3. Cơ sở dữ liệu cho các ứng dụng cơ bản

Như đã đề cập trước đó, ban đầu chỉ có thể lưu trữ dữ liệu bằng cách giao tiếp với cơ sở dữ liệu thông qua chương trình phụ trợ. Nhưng giờ đây, với LocalStorage, bạn có thể lưu trữ dữ liệu trên frontend mà không cần đến cơ sở dữ liệu. Do đó, LocalStorage đôi khi có thể đóng vai trò là cơ sở dữ liệu "nhỏ" cho các ứng dụng cơ bản

Cách truy cập LocalStorage

Truy cập LocalStorage khá đơn giản và chỉ mất vài bước

1. Truy cập bất kỳ trang web hoặc ứng dụng web nào và mở bảng điều khiển trình duyệt bằng cách nhấn F12 trên bàn phím
2. Tiếp theo, nhấp vào tab Ứng dụng và trong menu bên trái, bạn sẽ thấy

   //Storing objects in LocalStorage
   const user = {
     name: "Mandy",
     age: 23,
   };
   
   localStorage.setItem("user-info", JSON.stringify(user));
   
   //Storing arrays/lists in LocalStorage
   const names = ["John", "Jake", "Vanessa"];
   localStorage.setItem("names", JSON.stringify(names));
   

   1 dưới tab Lưu trữ như hình bên dưới

1. Nhấp vào danh sách thả xuống

   //Storing objects in LocalStorage
   const user = {
     name: "Mandy",
     age: 23,
   };
   
   localStorage.setItem("user-info", JSON.stringify(user));
   
   //Storing arrays/lists in LocalStorage
   const names = ["John", "Jake", "Vanessa"];
   localStorage.setItem("names", JSON.stringify(names));
   

   1 và nhấp thêm vào a/mục thả xuống.

Như có thể thấy, có hai cột,

//Storing objects in LocalStorage
const user = {
  name: "Mandy",
  age: 23,
};

localStorage.setItem("user-info", JSON.stringify(user));

//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));

5 và

//Storing objects in LocalStorage
const user = {
  name: "Mandy",
  age: 23,
};

localStorage.setItem("user-info", JSON.stringify(user));

//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));

6. Đây là nơi LocalStorage lưu trữ mọi dữ liệu bạn lưu vào đó

Cách sử dụng bộ nhớ cục bộ

Bạn có thể sử dụng các phương pháp sau để quản lý dữ liệu trong LocalStorage

MethodDescription

//Storing objects in LocalStorage
const user = {
  name: "Mandy",
  age: 23,
};

localStorage.setItem("user-info", JSON.stringify(user));

//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));

7Để lưu trữ dữ liệu trong LocalStorage.

//Storing objects in LocalStorage
const user = {
  name: "Mandy",
  age: 23,
};

localStorage.setItem("user-info", JSON.stringify(user));

//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));

8Để lấy hoặc truy xuất dữ liệu từ LocalStorage

//Storing objects in LocalStorage
const user = {
  name: "Mandy",
  age: 23,
};

localStorage.setItem("user-info", JSON.stringify(user));

//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));

9Để xóa dữ liệu khỏi LocalStorage bằng cách sử dụng khóa

localStorage.getItem("user-info");

0Để truy xuất dữ liệu từ LocalStorage tại một chỉ mục được chỉ định

thiết lập các mục( )

Phương pháp này được sử dụng để lưu trữ dữ liệu trong LocalStorage. Nó chấp nhận một khóa làm đối số đầu tiên và sau đó là một giá trị làm đối số thứ hai

Hãy thêm dữ liệu vào

//Storing objects in LocalStorage
const user = {
  name: "Mandy",
  age: 23,
};

localStorage.setItem("user-info", JSON.stringify(user));

//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));

1 bằng cách sử dụng như sau

localStorage.setItem("name", "Mandy");
// Here, `name` is the key and `Mandy` is the value

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Như đã đề cập trước đó, LocalStorage lưu trữ dữ liệu dưới dạng chuỗi, vì vậy nếu bạn muốn lưu dữ liệu như đối tượng và mảng, bạn cần chuyển đổi chúng thành chuỗi bằng phương thức

localStorage.getItem("user-info");

2

Hãy xem cách nó hoạt động

//Storing objects in LocalStorage
const user = {
  name: "Mandy",
  age: 23,
};

localStorage.setItem("user-info", JSON.stringify(user));

//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

getItem()

Sử dụng phương pháp

//Storing objects in LocalStorage
const user = {
  name: "Mandy",
  age: 23,
};

localStorage.setItem("user-info", JSON.stringify(user));

//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));

8 để lấy dữ liệu từ LocalStorage. Phương pháp này chấp nhận một tham số duy nhất, đó là

//Storing objects in LocalStorage
const user = {
  name: "Mandy",
  age: 23,
};

localStorage.setItem("user-info", JSON.stringify(user));

//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));

5 được sử dụng khi lưu dữ liệu

Ví dụ, để lấy dữ liệu như đối tượng

localStorage.getItem("user-info");

5 ở trên, bạn sẽ sử dụng câu lệnh sau

localStorage.getItem("user-info");

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đoạn mã trên sẽ trả về một chuỗi

localStorage.getItem("user-info");

6 như hình bên dưới

"{name:"Mandy", age:"23"}"

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Sau đó, bạn nên chuyển đổi nó thành một đối tượng bằng phương pháp

localStorage.getItem("user-info");

7

JSON.parse(localStorage.getItem('user-info'));

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

loại bỏ mục()

Sử dụng phương pháp

//Storing objects in LocalStorage
const user = {
  name: "Mandy",
  age: 23,
};

localStorage.setItem("user-info", JSON.stringify(user));

//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));

9 để xóa dữ liệu khỏi LocalStorage. Phương pháp này chấp nhận một

//Storing objects in LocalStorage
const user = {
  name: "Mandy",
  age: 23,
};

localStorage.setItem("user-info", JSON.stringify(user));

//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));

5 như một tham số

Ví dụ: bạn sẽ sử dụng câu lệnh sau để xóa đối tượng

localStorage.getItem("user-info");

5 khỏi LocalStorage

localStorage.removeItem("user-info");

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Chìa khóa()

Sử dụng phương pháp

"{name:"Mandy", age:"23"}"

1 để truy xuất dữ liệu từ LocalStorage, trong đó

"{name:"Mandy", age:"23"}"

2 đại diện cho dữ liệu

"{name:"Mandy", age:"23"}"

3 bạn muốn truy xuất

localStorage.key(2);

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

thông thoáng()

Sử dụng phương pháp

"{name:"Mandy", age:"23"}"

4 để xóa hoặc xóa tất cả dữ liệu khỏi LocalStorage tại một trường hợp cụ thể

localStorage.clear()  

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Dự án

Bây giờ bạn đã tìm hiểu về các phương pháp chính được sử dụng để quản lý dữ liệu trong LocalStorage, hãy bắt tay vào tạo một ứng dụng web nơi người dùng có thể

• Lưu dữ liệu vào LocalStorage
• Truy xuất dữ liệu
• Xóa/Xóa dữ liệu bằng cách sử dụng

  //Storing objects in LocalStorage
  const user = {
    name: "Mandy",
    age: 23,
  };
  
  localStorage.setItem("user-info", JSON.stringify(user));
  
  //Storing arrays/lists in LocalStorage
  const names = ["John", "Jake", "Vanessa"];
  localStorage.setItem("names", JSON.stringify(names));
  

  5
• Và cũng xóa tất cả dữ liệu khỏi LocalStorage

Hãy bắt đầu bằng cách tạo một thư mục mới và mở nó trong trình chỉnh sửa mã. Tiếp theo, tạo ba tệp,

"{name:"Mandy", age:"23"}"

6 ,

"{name:"Mandy", age:"23"}"

7 và

"{name:"Mandy", age:"23"}"

8

Hãy viết mã

Tệp

"{name:"Mandy", age:"23"}"

6 sẽ chứa đánh dấu HTML cho ứng dụng web. Mã HTML bao gồm một biểu mẫu có nhiều trường nhập liệu khác nhau với các nút

  
     charset="utf-8" />
     name="viewport" content="width=device-width" />
    
     rel="stylesheet" href="style.css" />
  
  
     id="form">
       id="userForm">
        
LocalStorage Application
         for="userName">User
        
          type="text"
          id="userName"
          placeholder="Enter user name"
          required
          autofocus
        /> />
         for="age">Age
        
          type="number"
          id="age"
          placeholder="Enter user age"
          required
        /> />
         for="key">Key
         type="text" id="key" placeholder="Enter key" required /> />
         type="submit">Save user
      
       />
       for="key">Enter Key to retrieve user
      
        type="text"
        id="retrieveKey"
        placeholder="Enter key to access user"
        required
      /> />
       id="retrieveButton">Retrieve user
       />
       id="userData">

/* base styles  */
html {
  font-size: 67.5%;
}
body {
  font-size: 1.6rem;
  padding: 0;
  margin: 0;
}

/* form   */
#form {
  margin-left: 2rem;
}

"{name:"Mandy", age:"23"}"

//Storing objects in LocalStorage
const user = {
  name: "Mandy",
  age: 23,
};

localStorage.setItem("user-info", JSON.stringify(user));

//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));

LocalStorage là một loại lưu trữ dữ liệu của web storage. Điều này cho phép các trang web và ứng dụng JavaScript lưu trữ và truy cập dữ liệu mà không có bất kỳ ngày hết hạn nào. Điều này có nghĩa là dữ liệu sẽ luôn được duy trì và sẽ không hết hạn. Vì vậy, dữ liệu được lưu trữ trong trình duyệt sẽ khả dụng ngay cả sau khi đóng cửa sổ trình duyệt