Javascript lưu trữ dữ liệu ở đâu?

Chương trình Giáo dục Kỹ thuật (EngEd) này được hỗ trợ bởi Mục. Triển khai tức thì các container trên nhiều nhà cung cấp đám mây trên toàn cầu

Dùng thử miễn phí

Cách sử dụng Bộ nhớ cục bộ với JavaScript

Ngày 11 tháng 1 năm 2021

Bộ nhớ cục bộ cho phép nhà phát triển lưu trữ và truy xuất dữ liệu trong trình duyệt. Dữ liệu được lưu trữ trong bộ nhớ cục bộ sẽ không hết hạn. Điều này có nghĩa là dữ liệu sẽ tồn tại ngay cả khi tab hoặc cửa sổ trình duyệt bị đóng

điều kiện tiên quyết

Bạn phải có hiểu biết cơ bản về JavaScript. Bạn cũng cần một trình chỉnh sửa mã và trình duyệt để kiểm tra dự án. Trong hướng dẫn này, chúng tôi sẽ sử dụng Visual Studio Code và Google Chrome

Lưu trữ cục bộ là gì

Lưu trữ cục bộ là một dạng lưu trữ web lưu trữ dữ liệu trong một thời gian dài. Đây có thể là một ngày, một tuần hoặc thậm chí một năm. Điều này phụ thuộc vào sở thích của nhà phát triển. Điều quan trọng cần lưu ý là bộ nhớ cục bộ chỉ lưu trữ các chuỗi, vì vậy, nếu bạn muốn lưu trữ các đối tượng, danh sách hoặc mảng, bạn phải chuyển đổi chúng thành một chuỗi bằng cách sử dụng

window.localStorage.setItem("grade","One");
//in this case, the `grade` is the key while `One` is the value.
6

Khi nào nên sử dụng bộ nhớ cục bộ

Bạn chỉ nên sử dụng bộ nhớ cục bộ khi lưu trữ thông tin nhạy cảm. Điều này là do các cá nhân bên thứ ba có thể dễ dàng truy cập thông tin. Bộ nhớ cục bộ có thể giúp lưu trữ dữ liệu tạm thời trước khi được đẩy lên máy chủ. Điều quan trọng là phải xóa bộ nhớ cục bộ sau khi thao tác này hoàn tất

Hạn chế

Những hạn chế chính của lưu trữ cục bộ là

  • dữ liệu không an toàn

  • Hoạt động đồng bộ

  • Dung lượng lưu trữ hạn chế

Các phương thức chính trong lưu trữ cục bộ

Các phương pháp chính khi sử dụng bộ nhớ cục bộ là

window.localStorage.setItem("grade","One");
//in this case, the `grade` is the key while `One` is the value.
7,
window.localStorage.setItem("grade","One");
//in this case, the `grade` is the key while `One` is the value.
8,
window.localStorage.setItem("grade","One");
//in this case, the `grade` is the key while `One` is the value.
9,
const Car = {
  brand:"Suzuki",
  color:"white",
  price:10000
}

window.localStorage.setItem('car', JSON.stringify(Car));
0 và
const Car = {
  brand:"Suzuki",
  color:"white",
  price:10000
}

window.localStorage.setItem('car', JSON.stringify(Car));
1

chìa khóa()

Phương thức này được sử dụng để truy xuất một giá trị/chuỗi từ một vị trí cụ thể. Chỉ mục có thể được chuyển vào hàm

window.localStorage.setItem("grade","One");
//in this case, the `grade` is the key while `One` is the value.
7 dưới dạng tham số

var answer = localStorage.key(1);
// this statement will retrieve the value of the second item in localStorage.

window.localStorage.setItem("grade","One");
//in this case, the `grade` is the key while `One` is the value.
7 cũng có thể được sử dụng trong câu lệnh vòng lặp để truy xuất tất cả các mục trong bộ nhớ cục bộ

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

Chức năng này được sử dụng để lưu trữ các mục trong bộ nhớ cục bộ. Một ví dụ về chức năng này được hiển thị bên dưới

window.localStorage.setItem("grade","One");
//in this case, the `grade` is the key while `One` is the value.

Như đã đề cập trước đây, chúng ta phải

const Car = {
  brand:"Suzuki",
  color:"white",
  price:10000
}

window.localStorage.setItem('car', JSON.stringify(Car));
4 đối tượng trước khi lưu trữ chúng trong bộ lưu trữ cục bộ

Một ví dụ được phác thảo dưới đây

const Car = {
  brand:"Suzuki",
  color:"white",
  price:10000
}

window.localStorage.setItem('car', JSON.stringify(Car));

Không xâu chuỗi đối tượng sẽ dẫn đến lỗi

getItem()

Chức năng này được sử dụng để truy cập hoặc lấy dữ liệu trong bộ nhớ cục bộ. Phương thức này nhận vào một tham số

const Car = {
  brand:"Suzuki",
  color:"white",
  price:10000
}

window.localStorage.setItem('car', JSON.stringify(Car));
5. Sau đó, nó trích xuất giá trị cần thiết từ localStorage

Ví dụ, để truy xuất đối tượng

const Car = {
  brand:"Suzuki",
  color:"white",
  price:10000
}

window.localStorage.setItem('car', JSON.stringify(Car));
6 ở trên, chúng ta sẽ sử dụng câu lệnh sau

window.localStorage.getItem('car');

Câu lệnh trên sẽ trả về một cái gì đó như thế này

"{brand:"Suzuki",color:"white",price:"10000"}"

Bạn nên chuyển đổi nó thành một đối tượng bằng cách sử dụng

const Car = {
  brand:"Suzuki",
  color:"white",
  price:10000
}

window.localStorage.setItem('car', JSON.stringify(Car));
7 để sử dụng nó trong mã của bạn

JSON.parse(window.localStorage.getItem('car'));

loại bỏ mục()

Phương pháp này được sử dụng để xóa một mục khỏi bộ nhớ cục bộ. Phương thức

window.localStorage.setItem("grade","One");
//in this case, the `grade` is the key while `One` is the value.
9 yêu cầu một khóa làm tham số

window.localStorage.removeItem('brand');

thông thoáng()

Phương pháp này được sử dụng để xóa tất cả các giá trị được lưu trữ trong bộ nhớ cục bộ. Nó không yêu cầu bất kỳ tham số nào

window.localStorage.clear()

Dự án

Bây giờ chúng ta đã tìm hiểu về các chức năng chính của bộ nhớ cục bộ, hãy tạo một ứng dụng web lưu trữ, truy xuất, xóa và xóa các mục khỏi bộ nhớ cục bộ

Tạo một thư mục mới và mở nó trong trình chỉnh sửa mã của bạn. Tạo hai tệp,

const Car = {
  brand:"Suzuki",
  color:"white",
  price:10000
}

window.localStorage.setItem('car', JSON.stringify(Car));
9 và
window.localStorage.getItem('car');
0. Tệp
const Car = {
  brand:"Suzuki",
  color:"white",
  price:10000
}

window.localStorage.setItem('car', JSON.stringify(Car));
9 sẽ hiển thị trang web cho người dùng, trong khi tệp
window.localStorage.getItem('car');
0 sẽ lưu trữ các chức năng JavaScript của chúng tôi. Các chức năng này sẽ được sử dụng để truy cập các chức năng khác nhau của bộ nhớ cục bộ

Hãy viết mã

const Car = {
  brand:"Suzuki",
  color:"white",
  price:10000
}

window.localStorage.setItem('car', JSON.stringify(Car));
9 của chúng tôi sẽ có một
window.localStorage.getItem('car');
4 và một số
window.localStorage.getItem('car');
5, như hình bên dưới

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Local Storage</title>
  <script type="text/javascript" src="main.js"></script>
</head>
<body>
  <div id="formDiv">
        <form id="carForm">
            <h1>Local Storage</h1>
            <label for="carBrand" >Car</label>
            <input type="text" id="carBrand" placeholder="Car brand" required autofocus><br>
            <label for="carPrice" >Price</label>
            <input type="text" id="carPrice" placeholder="Price" required><br>
            <label for="key" >Key</label>
            <input type="text" id="key" placeholder="Key" required><br>
            <button type="submit">Store Records</button>
        </form>
        <br>
        <label for="retrieveKey" >Enter Key to retrieve item</label>
        <input type="text" id="retrieveKey" placeholder="retrieveKey" required><br>
        <button id="retrieveButton">Retrieve records</button>
        <br>
        <div id="retrieve"></div>
        <br>
        <label for="removeKey" >Enter Key to delete item</label>
        <input type="text" id="removeKey" placeholder="removeKey" required><br>
        <button id="removeButton">Remove record</button>
        <br>
        <button id="clearButton">Clear all records</button>
  </div>
</body>
</html>

Khi nhấp vào nút

window.localStorage.getItem('car');
6, nó sẽ nhận đầu vào của người dùng và chuyển nó tới hàm
window.localStorage.getItem('car');
7 trong tệp
window.localStorage.getItem('car');
0.
window.localStorage.getItem('car');
9 nhận đầu vào của người dùng. Các giá trị này sau đó được chuyển đến đối tượng xe hơi và được lưu trữ trong bộ nhớ cục bộ bằng phương thức
"{brand:"Suzuki",color:"white",price:"10000"}"
0

function store(){ //stores items in the localStorage
    var brand = document.getElementById('carBrand').value;
    var price = document.getElementById('carPrice').value;
    var key = document.getElementById('key').value; //gets the key from the user

    const car = {
        brand: brand,
        price: price,
    }

    window.localStorage.setItem(key,JSON.stringify(car));  
    //converting object to string
}

Tương tự,

"{brand:"Suzuki",color:"white",price:"10000"}"
1 sẽ gọi hàm
"{brand:"Suzuki",color:"white",price:"10000"}"
2 khi được nhấp. Phương thức này tìm nạp các mục từ localStorage bằng hàm getItem

"{brand:"Suzuki",color:"white",price:"10000"}"
3 tạo một thành phần đoạn văn mới trong trang web của chúng tôi

"{brand:"Suzuki",color:"white",price:"10000"}"
4 giúp tạo văn bản sẽ hiển thị cho người dùng

Nút văn bản sau đó được thêm vào thẻ đoạn văn bằng cách

"{brand:"Suzuki",color:"white",price:"10000"}"
5

Các thành phần này sau đó được hiển thị ở một vị trí cụ thể trên trang web bởi

"{brand:"Suzuki",color:"white",price:"10000"}"
6 và
"{brand:"Suzuki",color:"white",price:"10000"}"
7

window.localStorage.setItem("grade","One");
//in this case, the `grade` is the key while `One` is the value.
0

"{brand:"Suzuki",color:"white",price:"10000"}"
8 gọi
window.localStorage.setItem("grade","One");
//in this case, the `grade` is the key while `One` is the value.
9.
JSON.parse(window.localStorage.getItem('car'));
0 này sẽ xóa một giá trị khỏi bộ nhớ cục bộ bằng cách sử dụng hàm
JSON.parse(window.localStorage.getItem('car'));
1

window.localStorage.setItem("grade","One");
//in this case, the `grade` is the key while `One` is the value.
1

JSON.parse(window.localStorage.getItem('car'));
2 gọi cho
JSON.parse(window.localStorage.getItem('car'));
3. Phương pháp
const Car = {
  brand:"Suzuki",
  color:"white",
  price:10000
}

window.localStorage.setItem('car', JSON.stringify(Car));
1 được sử dụng để xóa tất cả các giá trị trong bộ nhớ cục bộ

window.localStorage.setItem("grade","One");
//in this case, the `grade` is the key while `One` is the value.
2

Hãy đặt thuộc tính

JSON.parse(window.localStorage.getItem('car'));
5 của tất cả các nút khi tải trang web

window.localStorage.setItem("grade","One");
//in this case, the `grade` is the key while `One` is the value.
3

Đây là tệp

window.localStorage.getItem('car');
0 với tất cả các chức năng

window.localStorage.setItem("grade","One");
//in this case, the `grade` is the key while `One` is the value.
4

Như đã trình bày ở trên, các chức năng sẽ chỉ có thể truy cập được sau khi tải xong trang. Điều này được chỉ định bởi phương pháp

JSON.parse(window.localStorage.getItem('car'));
7

Đảm bảo rằng tệp

window.localStorage.getItem('car');
0 được tham chiếu trong tệp
const Car = {
  brand:"Suzuki",
  color:"white",
  price:10000
}

window.localStorage.setItem('car', JSON.stringify(Car));
9 bằng cách dán tuyên bố bên dưới vào phần
window.localStorage.removeItem('brand');
0

window.localStorage.setItem("grade","One");
//in this case, the `grade` is the key while `One` is the value.
5

Kết quả

Video sau đây cho thấy cách trang web hoạt động

Phần kết luận

Bây giờ bạn đã quen thuộc với các chức năng khác nhau của bộ nhớ cục bộ. Các phương thức chính trong lưu trữ cục bộ là

"{brand:"Suzuki",color:"white",price:"10000"}"
0,
window.localStorage.removeItem('brand');
2,
JSON.parse(window.localStorage.getItem('car'));
1 và
window.localStorage.removeItem('brand');
4. Cần có
const Car = {
  brand:"Suzuki",
  color:"white",
  price:10000
}

window.localStorage.setItem('car', JSON.stringify(Car));
5 khi lưu trữ, truy xuất và xóa các mục khỏi bộ lưu trữ cục bộ. Trong trường hợp bạn không hiểu bất kỳ khái niệm nào, vui lòng xem lại các chức năng lưu trữ cục bộ

JavaScript lưu trữ dữ liệu trong như thế nào?

JavaScript lưu trữ ngày tháng dưới dạng số mili giây kể từ ngày 01 tháng 1 năm 1970 . Giờ không là ngày 01 tháng 1 năm 1970 00. 00. 00 UTC. Một ngày (24 giờ) là 86 400 000 mili giây.

JavaScript có cơ sở dữ liệu không?

sql. js là cơ sở dữ liệu JavaScript SQL . Nó cho phép bạn tạo một cơ sở dữ liệu quan hệ và truy vấn nó hoàn toàn trong trình duyệt.

JavaScript có được sử dụng để lưu trữ dữ liệu không?

JavaScript cho phép chúng tôi lưu trữ dữ liệu trong trình duyệt bằng API lưu trữ cục bộ . Tại đây, bạn có thể sử dụng LocalStorage và SessionStorage. Các đối tượng cho phép chúng tôi lưu trữ dữ liệu (theo cặp khóa/giá trị) và cập nhật dữ liệu đó từ bộ lưu trữ của trình duyệt. Để xem dữ liệu, hãy mở trình duyệt của bạn.

Làm cách nào để lưu trữ dữ liệu vĩnh viễn trong JavaScript?

LocalStorage là một cách lưu trữ dữ liệu vĩnh viễn trong trình duyệt . Không giống như đặt một biến thông thường, nó không đặt lại khi bạn tải lại trang và bạn có thể truy cập cùng dữ liệu localStorage từ bất kỳ trang nào trên trang web của mình. LocalStorage là kho lưu trữ khóa-giá trị, nghĩa là bạn lưu trữ dữ liệu bằng khóa.