HomeLập trìnhJavaScriptTìm hiểu các...

Tìm hiểu các hoạt động CRUD trong JavaScript bằng cách xây dựng ứng dụng TODO


Hôm nay chúng ta sẽ học cách thực hiện các Thao tác CRUD trong JavaScript bằng cách tạo Ứng dụng Todo. Bắt đầu nào 🔥

Đây là ứng dụng chúng tôi đang làm ngày hôm nay:

Ứng dụng mà chúng tôi đang làm ngày hôm nay

Bạn cũng có thể xem hướng dẫn này trên YouTube nếu thích 🎥

  • CRUD là gì?
  • Hiểu nguyên tắc CRUD
  • Cách tạo ứng dụng việc cần làm bằng hoạt động CRUD

CRUD là gì?

Mô tả hình ảnh

CRUD là viết tắt của –

  • C: Tạo
  • R: Đọc
  • U: Cập nhật
  • D: Xóa

CRUD dạng đầy đủ

CRUD là một loại cơ chế cho phép bạn tạo dữ liệu, đọc dữ liệu, chỉnh sửa và xóa dữ liệu đó. Trong trường hợp của chúng tôi, chúng tôi sẽ tạo một ứng dụng Todo, vì vậy chúng tôi sẽ có 4 tùy chọn để tạo tác vụ, đọc tác vụ, cập nhật tác vụ hoặc xóa tác vụ.

Hiểu nguyên tắc CRUD

Trước khi bắt đầu hướng dẫn, trước tiên, hãy hiểu các nguyên tắc CRUD. Để làm được điều đó, hãy tạo một Ứng dụng Truyền thông Xã hội rất đơn giản.

Dự án ứng dụng truyền thông xã hội

Cài đặt

Thiết lập dự án

Đối với dự án này, chúng tôi sẽ thực hiện theo các bước sau:

  • Tạo 3 file tên là index.html, style.css và main.js
  • Liên kết tệp JavaScript và CSS với index.html
  • Bắt đầu máy chủ trực tiếp của bạn

HTML

Bên trong thẻ body, tạo một div với tên lớp .container. Ở đó, chúng ta sẽ có 2 phần, .left.right 👇

<body>
  <h1>Social Media App</h1>
  <div class="container">

    <div class="left"></div>
    <div class="right"></div>

  </div>
</body>

Ở phía bên trái, chúng tôi sẽ tạo bài viết của chúng tôi. Ở phía bên phải, chúng ta có thể xem, cập nhật và xóa các bài đăng của mình. Bây giờ, hãy tạo một biểu mẫu bên trong thẻ .left div 👇

<div class="left">
  <form id="form">
    <label for="post"> Write your post here</label>
    <br><br>
    <textarea name="post" id="input" cols="30" rows="10"></textarea>
    <br> <br>
    <div id="msg"></div>
    <button type="submit">Post</button>
  </form>
</div>

Viết mã này bên trong HTML để chúng tôi có thể hiển thị bài đăng của mình ở bên phải 👇

<div class="right">
  <h3>Your posts here</h3>
  <div id="posts"></div>
</div>

Tiếp theo, chúng tôi sẽ chèn CDN tuyệt vời về phông chữ bên trong thẻ đầu để sử dụng phông chữ của nó trong dự án của chúng tôi 👇

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

Bây giờ, chúng ta sẽ tạo một số bài viết mẫu với các biểu tượng xóa và chỉnh sửa. Viết mã này bên trong div với id #posts: 👇

<div id="posts">
  <div>
    <p>Hello world post 1</p>
    <span class="options">
      <i class="fas fa-edit"></i>
      <i class="fas fa-trash-alt"></i>
    </span>
  </div>

  <div >
    <p>Hello world post 2</p>
    <span class="options">
      <i class="fas fa-edit"></i>
      <i class="fas fa-trash-alt"></i>
    </span>
  </div>
</div>

Kết quả cho đến nay trông như thế này:

Kết quả đánh dấu HTML

CSS

Thêm CSS cho dự án 1

Hãy giữ cho nó đơn giản. Viết các kiểu này bên trong biểu định kiểu của bạn: 👇

body {
  font-family: sans-serif;
  margin: 0 50px;
}

.container {
  display: flex;
  gap: 50px;
}

#posts {
  width: 400px;
}

i {
  cursor: pointer;
}

Bây giờ, hãy viết các kiểu này cho div bài đăng và các biểu tượng tùy chọn: 👇

#posts div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.options {
  display: flex;
  gap: 25px;
}

#msg {
  color: red;
}

Kết quả cho đến nay trông như thế này:👇

Kết quả sau khi add project phần css 1

Phần JavaScript

Bắt đầu phần javascript

Theo sơ đồ dòng chảy này, chúng tôi sẽ tiếp tục với dự án. Đừng lo lắng, tôi sẽ giải thích mọi thứ trên đường đi. 👇

sơ đồ

Xác thực biểu mẫu

Trước tiên, hãy nhắm mục tiêu tất cả các bộ chọn ID từ HTML trong JavaScript. Như thế này: 👇

let form = document.getElementById("form");
let input = document.getElementById("input");
let msg = document.getElementById("msg");
let posts = document.getElementById("posts");

Sau đó, xây dựng trình lắng nghe sự kiện gửi cho biểu mẫu để nó có thể ngăn hành vi mặc định của Ứng dụng của chúng tôi. Đồng thời, chúng ta sẽ tạo một hàm có tên formValidation. 👇

form.addEventListener("submit", (e) => {
  e.preventDefault();
  console.log("button clicked");

  formValidation();
});

let formValidation = () => {};

Bây giờ, chúng ta sẽ tạo một câu lệnh if other bên trong formValidation chức năng. Điều này sẽ giúp chúng tôi ngăn người dùng gửi các trường nhập liệu trống. 👇

let formValidation = () => {
  if (input.value === "") {
    msg.innerHTML = "Post cannot be blank";
    console.log("failure");
  } else {
    console.log("successs");
    msg.innerHTML = "";
  }
};

Đây là kết quả cho đến nay: 👇

Đọc thêm  Tổng quan nhanh về các ký hiệu JavaScript

7sb8faq21j5dzy9vlswj

Như bạn có thể thấy, một thông báo cũng sẽ hiển thị nếu người dùng cố gửi biểu mẫu trống.

Cách chấp nhận dữ liệu từ các trường đầu vào

Bất kỳ dữ liệu nào chúng tôi nhận được từ các trường đầu vào, chúng tôi sẽ lưu trữ chúng trong một đối tượng. Hãy tạo một đối tượng có tên data. Và, tạo một hàm có tên acceptData: 👇

let data = {};

let acceptData = () => {};

Ý tưởng chính là, bằng cách sử dụng hàm, chúng tôi thu thập dữ liệu từ đầu vào và lưu trữ chúng trong đối tượng có tên là data. Bây giờ hãy hoàn thành việc xây dựng của chúng tôi acceptData chức năng.

let acceptData = () => {
  data["text"] = input.value;
  console.log(data);
};

Ngoài ra, chúng tôi cần các acceptData chức năng hoạt động khi người dùng nhấp vào nút gửi. Vì vậy, chúng tôi sẽ kích hoạt chức năng này trong câu lệnh khác của chúng tôi formValidation chức năng. 👇

let formValidation = () => {
  if (input.value === "") {
    // Other codes are here
  } else {
    // Other codes are here
    acceptData();
  }
};

Khi chúng tôi nhập dữ liệu và gửi biểu mẫu, trên bảng điều khiển, chúng tôi có thể thấy một đối tượng đang giữ các giá trị đầu vào của người dùng. Như thế này: 👇

kết quả cho đến nay trên bảng điều khiển

Cách tạo bài đăng bằng chữ mẫu JavaScript

Để đăng dữ liệu đầu vào của chúng tôi ở phía bên phải, chúng tôi cần tạo một phần tử div và nối nó vào div của bài đăng. Đầu tiên, hãy tạo một hàm và viết những dòng này: 👇

let createPost = () => {
  posts.innerHTML += ``;
};

Backticks là mẫu chữ. Nó sẽ hoạt động như một khuôn mẫu cho chúng tôi. Ở đây, chúng ta cần 3 thứ: div cha, chính đầu vào và div tùy chọn mang biểu tượng chỉnh sửa và xóa. Hãy hoàn thành chức năng của chúng ta 👇

let createPost = () => {
  posts.innerHTML += `
  <div>
    <p>${data.text}</p>
    <span class="options">
      <i onClick="editPost(this)" class="fas fa-edit"></i>
      <i onClick="deletePost(this)" class="fas fa-trash-alt"></i>
    </span>
  </div>
  `;
  input.value = "";
};

trong chúng tôi acceptdata chức năng, chúng tôi sẽ kích hoạt createPost chức năng. Như thế này: 👇

let acceptData = () => {
  // Other codes are here

  createPost();
};

Kết quả cho đến nay: 👇

Kết quả cho đến nay

Cho đến nay, các bạn tốt, chúng ta gần như đã hoàn thành dự án 1.

càng xa càng tốt

Cách xóa bài viết

Để xóa một bài đăng, trước hết, hãy tạo một hàm bên trong tệp javascript của chúng tôi:

let deletePost = (e) => {};

Tiếp theo, chúng tôi bắn cái này deletePost chức năng bên trong tất cả các biểu tượng xóa của chúng tôi bằng thuộc tính onClick. Bạn sẽ viết những dòng này bằng HTML và trên mẫu chữ. 👇

<i onClick="deletePost(this)" class="fas fa-trash-alt"></i>

Các this từ khóa sẽ đề cập đến yếu tố kích hoạt sự kiện. trong trường hợp của chúng tôi, các this đề cập đến nút xóa.

Hãy xem xét kỹ, cha của nút xóa là khoảng với các tùy chọn tên lớp. Cha mẹ của span là div. Vì vậy, chúng tôi viết parentElement hai lần để chúng tôi có thể chuyển từ biểu tượng xóa sang div và nhắm mục tiêu trực tiếp để xóa nó.

Hãy hoàn thành chức năng của chúng tôi. 👇

let deletePost = (e) => {
  e.parentElement.parentElement.remove();
};

Kết quả cho đến nay: 👇

xóa kết quả bài viết

Cách chỉnh sửa bài viết

Để chỉnh sửa bài đăng, trước hết, hãy tạo một hàm bên trong tệp JavaScript của chúng tôi:

let editPost = (e) => {};

Tiếp theo, chúng tôi bắn cái này editPost chức năng bên trong tất cả các biểu tượng chỉnh sửa của chúng tôi bằng thuộc tính onClick. Bạn sẽ viết những dòng này bằng HTML và trên mẫu chữ. 👇

<i onClick="editPost(this)" class="fas fa-edit"></i>

Các this từ khóa sẽ đề cập đến yếu tố kích hoạt sự kiện. Trong trường hợp của chúng tôi, các this đề cập đến nút chỉnh sửa.

Hãy xem xét kỹ, cha của nút chỉnh sửa là khoảng với các tùy chọn tên lớp. Cha mẹ của span là div. Vì vậy, chúng tôi viết parentElement hai lần để chúng tôi có thể chuyển từ biểu tượng chỉnh sửa sang div và nhắm mục tiêu trực tiếp để xóa nó.

Sau đó, bất kỳ dữ liệu nào có trong bài đăng, chúng tôi sẽ đưa dữ liệu đó trở lại trường nhập liệu để chỉnh sửa.

Đọc thêm  đầu hàng! đầu hàng! Cách Trình tạo hoạt động trong JavaScript.

Hãy hoàn thành chức năng của chúng tôi. 👇

let editPost = (e) => {
  input.value = e.parentElement.previousElementSibling.innerHTML;
  e.parentElement.parentElement.remove();
};

Kết quả cho đến nay: 👇

Chỉnh sửa kết quả bài đăng

Nghỉ ngơi một lát!

Nghỉ ngơi một lát

Xin chúc mừng tất cả mọi người đã hoàn thành dự án 1. Bây giờ, hãy nghỉ ngơi một chút!

Hãy tạo một ứng dụng việc cần làm

Hãy bắt đầu làm project 2, đó là To-Do App.

Thiết lập dự án

Thiết lập dự án

Đối với dự án này, chúng tôi sẽ thực hiện theo các bước sau:

  • Tạo 3 file tên là index.html, style.css và main.js
  • Liên kết các tệp JavaScript và CSS với index.html
  • Bắt đầu máy chủ trực tiếp của chúng tôi

HTML

Viết mã bắt đầu này bên trong tệp HTML: 👇

<div class="app">
  <h4 class="mb-3">TODO App</h4>

  <div id="addNew" data-bs-toggle="modal" data-bs-target="#form">
    <span>Add New Task</span>
    <i class="fas fa-plus"></i>
  </div>
</div>

Div có id addNew là nút sẽ mở phương thức. Khoảng sẽ được hiển thị trên nút. Các i là biểu tượng từ font-awesome.

Chúng tôi sẽ sử dụng bootstrap để tạo phương thức của mình. Chúng tôi sẽ sử dụng phương thức để thêm các tác vụ mới. Đối với điều đó, hãy thêm liên kết CDN bootstrap bên trong thẻ đầu. 👇

<link
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
  crossorigin="anonymous"
/>

<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
  crossorigin="anonymous"
></script>

Để xem các tác vụ đã tạo, chúng ta sẽ sử dụng một div có id task, bên trong div có classname app. 👇

<h5 class="text-center my-3">Tasks</h5>

<div id="tasks"></div>

Chèn CDN phông chữ tuyệt vời bên trong thẻ đầu để sử dụng phông chữ trong dự án của chúng tôi 👇

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

Sao chép và dán mã bên dưới từ phương thức bootstrap. Nó mang một biểu mẫu với 3 trường nhập liệu và một nút gửi. Nếu muốn, bạn có thể tìm kiếm trang web của Bootstrap bằng cách viết ‘modal’ vào thanh tìm kiếm.

<!-- Modal -->
<form
  class="modal fade"
  id="form"
  tabindex="-1"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Add New Task</h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <p>Task Title</p>
        <input type="text" class="form-control" name="" id="textInput" />
        <div id="msg"></div>
        <br />
        <p>Due Date</p>
        <input type="date" class="form-control" name="" id="dateInput" />
        <br />
        <p>Description</p>
        <textarea
          name=""
          class="form-control"
          id="textarea"
          cols="30"
          rows="5"
        ></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          Close
        </button>
        <button type="submit" id="add" class="btn btn-primary">Add</button>
      </div>
    </div>
  </div>
</form>

Kết quả cho đến nay: 👇

thiết lập tập tin Html

Chúng ta đã hoàn tất việc thiết lập tệp HTML. Hãy bắt đầu CSS.

CSS

Thêm phần css

Thêm các kiểu này vào phần thân để chúng tôi có thể giữ ứng dụng của mình ở chính giữa màn hình.

body {
  font-family: sans-serif;
  margin: 0 50px;
  background-color: #e5e5e5;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Hãy tạo kiểu cho div bằng ứng dụng tên lớp. 👇

.app {
  background-color: #fff;
  width: 300px;
  height: 500px;
  border: 5px solid #abcea1;
  border-radius: 8px;
  padding: 15px;
}

Kết quả cho đến nay: 👇

phong cách ứng dụng

Bây giờ, hãy tạo kiểu cho nút có id addNew. 👇

#addNew {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(171, 206, 161, 0.35);
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}
.fa-plus {
  background-color: #abcea1;
  padding: 3px;
  border-radius: 3px;
}

Kết quả cho đến nay: 👇

Thêm nút nhiệm vụ mới

Nếu bạn nhấp vào nút, phương thức sẽ bật lên như thế này: 👇

phương thức poping

thêm mã nguồn

Thêm JavaScript

Trong tệp JavaScript, trước hết, chọn tất cả các bộ chọn từ HTML mà chúng ta cần sử dụng. 👇

let form = document.getElementById("form");
let textInput = document.getElementById("textInput");
let dateInput = document.getElementById("dateInput");
let textarea = document.getElementById("textarea");
let msg = document.getElementById("msg");
let tasks = document.getElementById("tasks");
let add = document.getElementById("add");

Xác thực biểu mẫu

Chúng tôi không thể cho phép người dùng gửi các trường nhập liệu trống. Vì vậy, chúng ta cần xác thực các trường đầu vào. 👇

form.addEventListener("submit", (e) => {
  e.preventDefault();
  formValidation();
});

let formValidation = () => {
  if (textInput.value === "") {
    console.log("failure");
    msg.innerHTML = "Task cannot be blank";
  } else {
    console.log("success");
    msg.innerHTML = "";
  }
};

Ngoài ra, thêm dòng này bên trong CSS:

#msg {
  color: red;
}

Kết quả cho đến nay: 👇

Mô tả hình ảnh

Như bạn có thể thấy, quá trình xác thực đang hoạt động. Mã JavaScript không cho phép người dùng gửi các trường nhập liệu trống, nếu không, bạn sẽ thấy thông báo lỗi.

Cách thu thập dữ liệu và sử dụng bộ nhớ cục bộ

Bất cứ đầu vào nào người dùng viết, chúng tôi cần thu thập chúng và lưu trữ chúng trong bộ nhớ cục bộ.

Đầu tiên, chúng tôi thu thập dữ liệu từ các trường đầu vào, sử dụng chức năng có tên acceptData và một mảng có tên data. Sau đó, chúng tôi đẩy chúng vào bộ nhớ cục bộ như thế này: 👇

let data = [];

let acceptData = () => {
  data.push({
    text: textInput.value,
    date: dateInput.value,
    description: textarea.value,
  });

  localStorage.setItem("data", JSON.stringify(data));

  console.log(data);
};

Cũng lưu ý rằng điều này sẽ không bao giờ hoạt động trừ khi bạn gọi hàm acceptData bên trong câu lệnh khác của xác thực biểu mẫu. Theo dõi tại đây: 👇

let formValidation = () => {

  // Other codes are here
   else {

    // Other codes are here

    acceptData();
  }
};

Bạn có thể nhận thấy rằng phương thức không tự động đóng. Để giải quyết vấn đề này, hãy viết hàm nhỏ này bên trong câu lệnh khác của xác thực biểu mẫu: 👇

let formValidation = () => {

  // Other codes are here
   else {

    // Other codes are here

    acceptData();
    add.setAttribute("data-bs-dismiss", "modal");
    add.click();

    (() => {
      add.setAttribute("data-bs-dismiss", "");
    })();
  }
};

Nếu bạn mở công cụ dành cho nhà phát triển Chrome, hãy truy cập ứng dụng và mở bộ nhớ cục bộ. Bạn có thể thấy kết quả này: 👇

Đọc thêm  ES6 cung cấp cho các nhà phát triển JavaScript nhiều cách hơn để làm mọi việc. Nhưng đó không phải lúc nào cũng là một điều tốt.

Kết quả lưu trữ cục bộ

Cách tạo nhiệm vụ mới

Để tạo một tác vụ mới, chúng ta cần tạo một hàm, sử dụng các ký tự mẫu để tạo các phần tử HTML và sử dụng bản đồ để đẩy dữ liệu được thu thập từ người dùng vào bên trong mẫu. Theo dõi tại đây: 👇

let createTasks = () => {
  tasks.innerHTML = "";
  data.map((x, y) => {
    return (tasks.innerHTML += `
    <div id=${y}>
          <span class="fw-bold">${x.text}</span>
          <span class="small text-secondary">${x.date}</span>
          <p>${x.description}</p>
  
          <span class="options">
            <i onClick= "editTask(this)" data-bs-toggle="modal" data-bs-target="#form" class="fas fa-edit"></i>
            <i onClick ="deleteTask(this);createTasks()" class="fas fa-trash-alt"></i>
          </span>
        </div>
    `);
  });

  resetForm();
};

Cũng lưu ý rằng chức năng sẽ không bao giờ chạy trừ khi bạn gọi nó bên trong acceptData chức năng, như thế này: 👇

let acceptData = () => {
  // Other codes are here

  createTasks();
};

Khi chúng tôi đã hoàn tất việc thu thập và chấp nhận dữ liệu từ người dùng, chúng tôi cần xóa các trường nhập liệu. Đối với điều đó, chúng tôi tạo ra một chức năng gọi là resetForm. Cùng theo dõi: 👇

let resetForm = () => {
  textInput.value = "";
  dateInput.value = "";
  textarea.value = "";
};

Kết quả cho đến nay: 👇

Thêm thẻ nhiệm vụ

Như bạn có thể thấy, không có phong cách nào với thẻ. Hãy thêm một số phong cách: 👇

#tasks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

#tasks div {
  border: 3px solid #abcea1;
  background-color: #e2eede;
  border-radius: 6px;
  padding: 5px;
  display: grid;
  gap: 4px;
}

Tạo kiểu cho các nút chỉnh sửa và xóa bằng mã này: 👇

#tasks div .options {
  justify-self: center;
  display: flex;
  gap: 20px;
}

#tasks div .options i {
  cursor: pointer;
}

Kết quả cho đến nay: 👇

Mẫu thẻ phong cách

Chức năng xóa nhiệm vụ

Hãy xem kỹ ở đây, tôi đã thêm 3 dòng mã bên trong hàm.

  • Dòng đầu tiên sẽ xóa phần tử HTML khỏi màn hình,
  • dòng thứ hai sẽ xóa Tác vụ được nhắm mục tiêu khỏi mảng dữ liệu,
  • và dòng thứ ba sẽ cập nhật bộ nhớ cục bộ với dữ liệu mới.
let deleteTask = (e) => {
  e.parentElement.parentElement.remove();

  data.splice(e.parentElement.parentElement.id, 1);

  localStorage.setItem("data", JSON.stringify(data));

  console.log(data);
};

Bây giờ hãy tạo một tác vụ giả và cố gắng xóa nó. Kết quả cho đến nay trông như thế này: 👇

Mô tả hình ảnh

Chức năng chỉnh sửa công việc

Hãy xem kỹ ở đây, tôi đã thêm 5 dòng mã bên trong hàm.

  • Dòng 1 đang nhắm mục tiêu tác vụ mà chúng tôi đã chọn để chỉnh sửa
  • Các dòng 2, 3 và 4 đang nhắm mục tiêu các giá trị [task, date, description] của nhiệm vụ mà chúng tôi đã chọn để chỉnh sửa
  • dòng 5 đang chạy chức năng xóa để xóa cả dữ liệu đã chọn khỏi bộ nhớ cục bộ, phần tử HTML và mảng dữ liệu.
let editTask = (e) => {
  let selectedTask = e.parentElement.parentElement;

  textInput.value = selectedTask.children[0].innerHTML;
  dateInput.value = selectedTask.children[1].innerHTML;
  textarea.value = selectedTask.children[2].innerHTML;

  deleteTask(e);
};

Bây giờ, hãy thử tạo một tác vụ giả và chỉnh sửa nó. Kết quả cho đến nay: 👇

Chỉnh sửa một nhiệm vụ

Cách lấy dữ liệu từ bộ nhớ cục bộ

Nếu làm mới trang, bạn sẽ nhận thấy rằng tất cả dữ liệu của mình đã biến mất. Để giải quyết vấn đề đó, chúng tôi chạy IIFE (Biểu thức hàm được gọi ngay lập tức) để truy xuất dữ liệu từ bộ nhớ cục bộ. Cùng theo dõi: 👇

(() => {
  data = JSON.parse(localStorage.getItem("data")) || [];
  console.log(data);
  createTasks();
})();

Bây giờ dữ liệu sẽ hiển thị ngay cả khi bạn làm mới trang.

Phần kết luận

Xin chúc mừng

Chúc mừng bạn đã hoàn thành thành công hướng dẫn này. Bạn đã học cách tạo ứng dụng danh sách việc cần làm bằng các thao tác CRUD. Bây giờ, bạn có thể tạo ứng dụng CRUD của riêng mình bằng hướng dẫn này.

Đây là huy chương của bạn để đọc cho đến khi kết thúc. ❤️

Đề xuất & phê bình được đánh giá cao ❤️

Văn bản thay thế



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status