## Giới thiệu

Xin chào các bạn, ngày nay HTML hay Hypertext Markup Language đã trở thành một ngôn ngữ phổ biến và rộng rãi hơn với tất cả mọi người. Nếu các bạn muốn tìm hiểu về lập trình web, việc biết đến HTML là điều cần phải có, bởi vì dù trang web có đơn giản hay phức tạp thì đều có phần HTML làm khung xương, khung xương vững chắc thì những thành phần khác mới xây lên một cách dễ dàng được. Vậy thì hôm nay mình sẽ cùng các bạn tìm hiểu về một số thẻ cơ bản và thông dụng nhất trong HTML nhé.

## Phân loại thẻ trong HTML

### Phân loại theo cấu trúc

Ở trong HTML, các bạn sẽ dễ dàng nhận ra được cấu trúc khác nhau cơ bản của 2 loại thẻ chính: thẻ có thẻ mở và thẻ đóng, và thẻ tự đóng.

```html
<p>Welcome to GDSC-HUST</p>
```

Ở trên mình có thẻ p với `<p>` là thẻ mở sau đó đến nội dung là `Welcome to GDSC-HUST` rồi đến thẻ đóng là `</p>`, các bạn thấy thẻ đóng nó giống thẻ mở nhưng có dấu `/` phía trước nhé. Ngoài ra các bạn sẽ thường gặp những thẻ tự đóng có cấu trúc như sau:

```html
<img src="" alt=""/>
```

Những thẻ có cấu trúc như trên gọi là thẻ tự đóng nghĩa là chúng ta không thể truyền nội dung vào giữa như thẻ đóng mở ở chỗ thẻ p mình nói ở trên. Các bạn cần lưu ý những thẻ nào là thẻ có thẻ mở và thẻ đóng và những thẻ nào tự đóng để code chuẩn hơn và tránh gặp lỗi nhé.

### Phân loại theo tính chất

Khi làm quen với HTML, chúng ta có thể thấy được có những thẻ có tính chất, đặc điểm, hành vi trên web khác với thẻ khác, vì vậy dựa trên điều này chúng ta có 2 loại thẻ chính là: **thẻ block** và **thẻ inline**.

Thẻ inline và thẻ block có những điểm khác nhau chính mà các bạn cần lưu ý

- Thẻ inline sẽ bị hạn chế về CSS như margin-top margin-bottom, padding-top, padding-bottom… khi sử dụng thẻ inline thì nên biết mà tuỳ trường hợp mà sử dụng, có thể dùng CSS để biến thẻ inline thành block hoặc inline block
- Khi các thẻ inline nằm cùng nhau thì nó sẽ nằm trên một hàng như tên gọi của nó là inline
- Thẻ inline sẽ có độ rộng bằng nội dung mà nó chứa
- Thẻ block sẽ có độ rộng full 100% phần tử cha chứa nó
- Thẻ block không bị hạn chế về CSS
- Vì thẻ block full 100% phần tử cha chứa nó cho nên khi dùng thẻ block cùng với nhau thì các phần tử đó sẽ rớt xuống hàng
- Thẻ inline và thẻ block có thể sử dụng cùng với nhau, điển hình là thẻ a nằm trong thẻ p khi các bạn đọc bài viết có gắn link vào để các bạn nhấn vô được

```html
<p>You can<a href="google.com">click here</a></p>
```

- Khi sử dụng CSS biến thẻ thành inline-block thì nó là sự kết hợp giữa thẻ inline và thẻ block, tức là nó sẽ có độ rộng theo nội dung nó chứa mà thôi(đặc điểm của thẻ inline), và không bị hạn chế về CSS(đặc điểm của thẻ block), nằm gần nhau thì nằm trên 1 hàng(đặc điểm của thẻ inline)

## Các thẻ HTML hay dùng nhất

### Thẻ div

Là **thẻ block** và là thẻ được sử dụng rộng rãi nhất hiện nay. Thẻ div thường được dùng cho một khối nào đó lớn, bên trong khối đó có thể có nhiều khối nhỏ(cũng là thẻ div) hoặc các thẻ p, và nhiều thẻ khác, chính vì vậy, thẻ div là viết tắt của division tức là sự phân chia các mục. Có thể nói thẻ div là thẻ chung nhất và có thể đảm nhận nhiều chức năng của các thẻ khác, khi chưa có những thẻ đặc biệt tạo bố cục trang web, thì thẻ div sẽ được dùng để thay cho các thẻ đó. Ngoài ra, thẻ div cũng có thể chứa văn bản tương tự với thẻ văn bản(thẻ p), tuy nhiên chúng ta nên dùng thẻ p như sẽ được giới thiệu tiếp theo đây.

```html
<div class = "container">
    <div class = "inside-container">
        <div>This is div tag</div>
    </div>
</div>
```

### Thẻ văn bản

Thẻ văn bản hay trong html là thẻ p, là **thẻ block** đặc trưng cho văn bản(paragraph) và theo mình cũng là thẻ cơ bản nhất trong html. Thẻ p có các thuộc tính hay dùng là class và id, nội dung thẻ p là các đoạn văn bản bất kì. Trên các trang web, các bạn có thể thấy rằng hầu hết các đoạn văn bản đều được chứa trong các thẻ p. Vì vậy, khi muốn viết một đoạn văn bản trên web, các bạn hãy ưu tiên bọc nó bằng thẻ p nhé.

```html
<p>Đây là một đoạn văn bản bất kì</p>
```

### Các thẻ tiêu đề

Các thẻ tiêu đề là những thẻ `h1,h2,h3,h4,h5,h6` là **thẻ block** và thường đại diện cho các tiêu đề từ to cho đến nhỏ và có cách sử dụng khác nhau (h1 là to nhất tới h6 là nhỏ nhất). Thẻ **h1** là thẻ thường được sử dụng cho một tiêu đề to nhất của trang web và lưu ý trong một trang web thì chỉ có **tối đa một thẻ h1** mà thôi, vì nó ảnh hưởng tới SEO cho nên nếu các bạn sử dụng nhiều hơn một thẻ h1 thì không tốt đâu nhé.

```html
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
```

Như tên gọi của nó thì nó được dùng cho cấu trúc có tiêu đề ví dụ như tiêu đề khối, tiêu đề bài viết, tiêu đề blog. Bên trong nó có thể chứa thẻ a, hoặc các thẻ inline khác, hay thẻ block… Và các bạn lưu ý các đoạn văn bản dài như ở thẻ p thì nên dùng thẻ p hoặc thẻ div chẳng hạn chứ đừng dùng những thẻ tiêu đề này cho một đoạn văn bản quá dài nhé.

### Thẻ liên kết

Thẻ a là **thẻ inline**, dùng cho các liên kết, bạn có thể dùng thẻ này để liên kết đến các trang web khác hoặc liên kết đến các mục khác trong chính trang web hiện tại với điều kiện mục đó **phải có id** và trong **thuộc tính href** của thẻ a phải bắt đầu bằng **dấu #** 

```html
<a href = "link">Đây là liên kết đến trang web khác</a>
<a href = "#main">Liên kết đến nội dung chính trong trang này</a>
<div id = "main">Đây là nội dung chính</div>
```

Trong thẻ a có 2 thuộc tính quan trọng đó chính là `href và target`, **href** sẽ truyền vào đường dẫn, hoặc **id** mục khác sau dấu #, **target** thì có 2 giá trị thường được sử dụng nhất là `_self` và `_blank`, **_self** thì nó sẽ mở trong tab hiện tại luôn(dễ hiểu hơn nó sẽ thay thế tab hiện tại trên trình duyệt bằng link các bạn nhấn vào), còn **_blank** nó sẽ mở ra một tab mới trên trình duyệt. Nội dung của thẻ a sẽ là văn bản hiện ra trực tiếp với người dùng mà khi bấm vào sẽ dẫn tới đường link trong thuộc tính **href**, vì vậy các bạn nên đặt nội dung thẻ a tường minh, rõ ý nhé.

```html
<a href="https://google.com" target = "_blank">google.com</a>
```

Bên trong thẻ a có thể chứa nhiều thẻ khác luôn nhé như thẻ block khác, thẻ inline… Sau này các bạn code giao diện mà có cho người dùng nhấn vào một khối nào đó thì chắc chắn các bạn sẽ dùng thẻ a bao lại hết chúng.

### Thẻ img

Là **thẻ inline** và là **thẻ tự đóng** nên không truyền nội dung vào giữa như các thẻ đóng mở khác được. Thẻ này sử dụng rất nhiều trong trang web để hiển thị hình ảnh, thẻ img có 2 thuộc tính chính mà các bạn cần nắm đó là `src` và `alt` trong đó **src** truyền vào đường dẫn hình ảnh để hiển thị hình ảnh lên trang web, còn thẻ **alt** thì là liên quan tới SEO một chút, khi hình ảnh đường dẫn sai sẽ không hiển thị được thì nội dung trong thẻ alt sẽ hiển thị lên.

```html
<img src = "google_image.png" alt = "google_image">
```

Ngoài ra, như đã nói ở thẻ liên kết, bạn hoàn toàn có thể bọc thẻ img trong một thẻ a nếu muốn khi người dùng nhấp vào hình ảnh sẽ dẫn đến một trang khác.

### Thẻ danh sách

Thẻ danh sách thì có 2 thẻ chính với cấu trúc hay dùng là `ul li` và `ol li`. Trong đó **ul** nghĩa là **unorderedlist** nghĩa danh sách không có thứ tự, tức là khi dùng nó sẽ hiển thị dưới dạng như này với các chấm tròn mặc định hoặc vuông dựa vào CSS sẽ nói sau này.

- a
- b

Còn **ol** là **orderedlist** nghĩa là danh sách có thứ tự tức được đánh số như mục lục vậy 1 2

1. a
2. b

Thẻ danh sách được sử dụng nhiều để liệt kê các nội dung hoặc ở trường hợp để làm các mục của menu trang web

```html
<p>Things cats like:</p>
<ul class = "cat-hobbies">
    <li>Milk</li>
    <li>Fish</li>
    <li>Sleeping</li>
</ul>
```

### Các thẻ semantic

Với nhu cầu code web ngày càng phổ biến và rỗng rãi hơn, các thẻ semantic được tạo ra nhằm để giúp cho trang web có cấu trúc mạch lạc, khoa học hơn, nhất là những trang web về các bài báo hay các bài blog. Điều này là hoàn toàn hợp lý bởi vì lượng người dùng trang web càng ngày càng nhiều và chúng ta không chỉ sử dụng web trên các thiết bị nhìn mà còn có cả các thiết bị nghe. Chính vì vậy, cấu trúc web rõ ràng, mạch lạc các phần là điều rất quan trọng để các thiết bị này có thể phân biệt và truyền tải nội dung đến người dùng. Một số thẻ semantic có thể kể đến như: `thẻ header, thẻ footer, thẻ aside, thẻ article, thẻ main, thẻ section,...`

Chúng ta có thể nhận thấy rằng tên các thẻ semantic hiển thị rõ ý nghĩa và chức năng của từng thẻ. Trước khi có các thẻ này người ta thường dùng thẻ div kèm với id hay class để chia các thành phần trang bởi vì tính chất của các thẻ này là như nhau. Mặc dù vậy, các bạn mới làm quen với HTML nên học dùng các thẻ này luôn để có cái nhìn tổng quát về cấu trúc trang web.

![Sematic_tags](https://i.postimg.cc/NjQ1RFb7/semantic-tag.jpg)

### Các thẻ định dạng văn bản

Là các thẻ inline, có chức năng làm nổi bật các đoạn chữ ngắn hoặc căn chỉnh các thành phần theo nhu cầu của người tạo web. Một số thẻ thường dùng như thẻ `strong` và thẻ `b` làm cho chữ **in đậm**, thẻ `em` và thẻ `i` để làm chữ *in nghiêng*, thẻ `br` để xuống dòng,...

```html
<p>
    <b>Dòng này được in đậm</b>
    <br>  
    <em>Dòng này được in nghiêng</em>
</p>
```

## Tạm kết

Vậy là mình đã giới thiệu cho các bạn một số thẻ thông dụng trong HTML. Những thẻ này trông thì rất cơ bản và đơn giản nhưng lại đóng vai trò vô cùng quan trọng trong tất cả các trang web, với những thẻ này các bạn đã hoàn toàn có thể tạo riêng cho mình một trang web trình bày thông tin đơn giản rồi đấy. Cảm ơn các bạn đã đọc bài viết của mình và chúc các bạn học code vui vẻ!

Chỉ với một số thẻ HTML thông dụng, bạn đã hoàn toàn có thể tạo riêng cho mình một trang web đơn giản.

Giới thiệu các thẻ cơ bản trong HTML

## Giới thiệu

Hello các bạn, nếu các bạn có tìm hiểu hoặc đọc qua về Next.js thì sẽ biết rằng điểm đặc biệt của React framework này đó là Pre-rendering. Bài viết này mình sẽ bàn luận về Pre-rendering và Data Fetching trong Next.js, cùng với đó chúng ta sẽ tìm hiểu về Static Generation.

## Pre-rendering

Mặc định, Next.js sẽ pre-renders các trang, có nghĩa là *HTML sẽ được tạo trước cho từng trang, thay vì tất cả được thực hiện ở client-side bởi JavaScript*. Pre-rendering nâng cao hiệu năng của trang web và SEO (search engine optimization)

![img](https://nextjs.org/static/images/learn/data-fetching/pre-rendering.png)

![img](https://nextjs.org/static/images/learn/data-fetching/no-pre-rendering.png)

### Phân loại Pre-rendering

Next.js có 2 loại pre-rendering: [Static Generation](https://nextjs.org/docs/basic-features/pages#static-generation-recommended) và [Server-side Rendering](https://nextjs.org/docs/basic-features/pages#server-side-rendering). Sự khác biệt của 2 loại là thời điểm mà HTML được tạo cho một trang.

- [Static Generation](https://nextjs.org/docs/basic-features/pages#static-generation-recommended) sẽ tạo HTML tại thời điểm **build time**. Trang HTML được pre-render sau đó sẽ được tái sử dụng sau mỗi lần request.
-  [Server-side Rendering](https://nextjs.org/docs/basic-features/pages#server-side-rendering) là phương pháp pre-redering tạo HTML mới sau mỗi lần request.

### Khi nào sử dụng Static Generation và Server-side Rendering

Static Generation được khuyên dùng trong hầu hết trường hợp, vì trang web sẽ được build một lần và sau đó lưu trữ bởi CDN, phương pháp này giúp cho tốc độ của trang được tối ưu so với việc trang web được server render lại sau mỗi lần request. Một số trường hợp bạn có thể ứng dụng Static Generation như: `web marketing, bài đăng blog, trang sản phẩn E-commerce hay documentation`.

Tóm lại, nếu bạn cho rằng mình có thể pre-render trang web này trước request của người dùng, thì khả năng cao bạn nên dùng Static Generation. Mặt khác, nếu trang web thường xuyên cập nhật data hoặc là nội dung trang web thay đổi sau mỗi request thì chúng ta nên dùng Sever-side Rendering, điều này đảm bảo trang web sẽ luôn được cập nhật sau mỗi request. Ngoài ra, chúng ta cũng có thể sử dụng client-side rendering với JavaScript để xử lý dữ liệu cập nhật.

Ở nội dung bài viết này, chúng ta sẽ tập trung vào Static Generation, sau đó mình sẽ nói qua về fetching dữ liệu tại thời điểm Request.

## Static Generation

### Static Generation khi không có data

Với những trang web không yêu cầu tìm nạp dữ liệu từ bên ngoài, Next.js sẽ tự động thực hiện Static Generation đối với trang đấy và HTML sẽ được tạo tại thời điểm build time.

![img](https://nextjs.org/static/images/learn/data-fetching/static-generation-without-data.png)

### Static Generation có data

Tuy nhiên, đối với nhiều trang web, chúng ta mong đợi việc có thể fetch dữ liệu từ bên ngoài để render ra HTML, có thể là sử dụng API, dữ liêụ từ file systems, hoặc truy xuất cơ sở dữ liệu tại thời điểm build time,... Và Next.js cho bạn phương thức để thực hiện điều này.

![img](https://nextjs.org/static/images/learn/data-fetching/static-generation-with-data.png)

**Static Generation có Data với `` `getStaticProps` ``**

Để sử dụng getStaticProps, khi bạn export một page component, bạn có thể đồng thời export một `async` function là `getStaticProps`. Sau đó:

- `getStaticProps` chạy tại thời điểm build time trong môi trường production.
- Ở trong function này, chúng ta có thể tìm nạp data từ bên ngoài và gửi nó dưới dạng props cho page.

```js
export default function Home(props) { ... }

export async function getStaticProps() {
  // Get external data from the file system, API, DB, etc.
  const data = ...

  // The value of the `props` key will be
  //  passed to the `Home` component
  return {
    props: ...
  }
}
```

Về cơ bản, getStaticProps cho phép bạn nói với Next.js rằng: *"Này, trang này đang cần một số dữ liệu từ bên ngoài, vì thế khi bạn pre-render nó ở thời điểm build time, hãy chắc chắn rằng xử lý điều đấy trước!"*

> **Lưu ý:** Ở trong môi trường development, getStaticProps khởi chạy sau mỗi request.

Ví dụ với getStaticProps: Ở trong file `pages/post/index.js`, export ra function `Posts` đồng thời export function `getStaticProps`. Trong hàm `getStaticProps`, mình lấy dữ liệu posts từ API `https://jsonplaceholder.typicode.com/posts`, hàm trả về object `props` có chứa `posts`, sau đó `posts` được truyền vào làm props của `Posts` component. Cuối cùng, `posts` dùng để render ra giao diện.

```jsx
import Link from "next/link";

export default function Posts({ posts }) {
  return (
    <>
      <h1>List of Posts</h1>
      {posts.map((post) => (
        <div key={post.id}>
          <Link href={`posts/${post.id}`}>
            <h2>
              {post.id} {post.title}
            </h2>
          </Link>
          <hr />
        </div>
      ))}
    </>
  );
}

export async function getStaticProps() {
  let response = await fetch("https://jsonplaceholder.typicode.com/posts");
  let posts = await response.json();
  return {
    props: {
      posts,
    },
  };
}

```

## Fetching Data tại thời điểm Request

### Server-side Rendering

Nếu bạn muốn fetch dữ liệu tại **request time** thay vì **build time**, bạn có thể dùng [Server-side Rendering](https://nextjs.org/docs/basic-features/pages#server-side-rendering):

![img](https://nextjs.org/static/images/learn/data-fetching/server-side-rendering-with-data.png)

Để sử dụng Server-side Rendering, bạn cần export `getServerSideProps` thay vì `getStaticProps`.

**Sử dụng `` `getServerSideProps` ``**

Đoạn code export ra `async` function `getServerSideProps` được mô tả như sau:

```jsx
export async function getServerSideProps(context) {
  return {
    props: {
      // props for your component
    },
  };
}
```

Bởi vì  `getServerSideProps` được gọi tại request time, tham số `context` của nó sẽ chứa các tham số cụ thể của request.

Bạn chỉ nên sử dụng `getServerSideProps` khi mà trang của bạn cần pre-render với dữ liệu được fetch tại request time. Time to first bite ([TTFB](https://web.dev/time-to-first-byte/)) hay thời gian phản hồi của máy chủ sẽ chậm hơn so với `getStaticProps` vì máy chủ cần thực hiện tính toán và trả ra kết quả với mỗi request, kết quả vì thế sẽ không được lưu vào bộ đệm bởi [CDN](https://vercel.com/docs/edge-network/overview) mà không cấu hình.

### Client-side Rendering

Nếu bạn không cần phải render trước dữ liệu, bạn có thể sử dụng [Client-side Rendering](https://nextjs.org/docs/basic-features/data-fetching#fetching-data-on-the-client-side)

- Pre-render bằng phương pháp Static Generation những phần của trang mà không yêu cầu dữ liệu từ bên ngoài.
- Trong quá trình tải trang, fetch dữ liệu từ bên ngoài từ client bằng JavaScript và hoàn tất các phần còn lại của trang.

![img](https://nextjs.org/static/images/learn/data-fetching/client-side-rendering.png)

**Client-side Rendering** có thể ứng dụng vào các trang web mang tính bảo mật, không có nhu cầu về SEO, và đặc biệt là không cần render trước (pre-render). Dữ liệu của trang cập nhật thường xuyên, yêu cầu fetch data tại request-time.

## Tổng kết

Trong bài viết này, mình đã nói về Pre-rendering và Data Fetching trong Next.js. Pre-rendering có 2 loại là Static Generation và Server-side Rendering, trong đó Static Generation được khuyên dùng và mình cũng nói về Data Fetching của phương pháp này. Ngoài ra, bạn cũng có thể lựa chọn Server-side Rendering hoặc Client-side Rendering tùy vào nhu cầu fetching data của trang web.

Cảm ơn các bạn đã theo dõi và chúc các bạn học code vui vẻ! 👋



Nguồn tham khảo: trang web chính thức của [Next.js](https://nextjs.org/)

Hello các bạn, nếu các bạn có tìm hiểu hoặc đọc qua về Next.js thì sẽ biết rằng điểm đặc biệt của React framework này đó là Pre-rendering. Bài viết này mình sẽ bàn luận về Pre-rendering và Data Fetching trong Next.js, cùng với đó chúng ta sẽ tìm hiểu về Static Generation.

Pre-rendering và Data Fetching trong Next.js

CSS là một ngôn ngữ không thể thiếu trong lập trình web, với những dự án lớn và phức tạp về mặt giao diện, code CSS có thể trở nên dài dòng, phức tạp và khó bảo trì. Chính vì vậy, chúng ta cần đến sự trợ giúp của CSS Preprocessor, và một trong những ngôn ngữ được ưa chuộng nhất là SASS.

## CSS Preprocessor là gì?

CSS Preprocessors là ngôn ngữ tiền xử lý CSS, là một chương trình giúp biên dịch những cú pháp đặc trưng của ngôn ngữ tiền xử lý thành cú pháp CSS thông thường. CSS Preprocessor sẽ có thêm một số tính năng và cách viết giúp bạn tiết kiệm thời gian viết CSS, dễ dàng bảo trì và phát triển CSS hơn. Có rất nhiều loại CSS Preprocessor trong đó bao gồm SASS, Stylus hay LESS.

## Giới thiệu về SASS

SASS là một chương trình tiền xử lý CSS (*CSS preprocessor*). So với CSS thuần thì SASS có thêm một số tính năng như `nesting, mixins, inheritance` và một số thư viện hỗ trợ đi kèm giúp bạn viết CSS nhanh hơn, dễ dàng hơn và đặc biệt là có cú pháp giống một ngôn ngữ lập trình hơn.

Để bắt đầu với SASS, bạn có thể cài đặt package vào dự án với npm:

```bash
npm install sass
```

Sau khi SASS được cài đặt, bạn có thể biên dịch SASS thành CSS bằng câu lệnh `sass`. Câu lệnh này yêu cầu 2 đối số là file nguồn và file đích, tức là file sass để biên dịch và file css nó biên dịch thành. Chẳng hạn, trong folder `styles` mình có 2 file là `input.scss` và `output.css` thì khi chạy `sass input.scss output.css`, chương trình sẽ lấy `input.scss` và biên dịch lại thành `output.css`.

Nhưng mỗi khi có sự thay đổi trong file scss, bạn cần gõ lại lệnh trên để cập nhật thay đổi với file css, thao tác này có thể hơi mất thời gian và dễ quên. Chính vì vậy, chúng ta có thể bổ sung thêm --watch flag vào câu lệnh để lắng nghe sự thay đổi, mỗi lần file scss được thay đổi và lưu lại, tự động SASS sẽ biên dịch lại file css.

```bash
sass --watch input.scss output.css
```

> 💡 **Fun fact:** SASS có hai cú pháp! Cú pháp thứ nhất là SCSS (.scss) được sử dụng phổ biến hơn. Vì nó như một phiên bản nâng cấp của CSS, mọi cú pháp hợp lệ trong CSS đều hợp lệ trong SCSS. Cú pháp thụt lề (.sass) được sử dụng ít hơn: nó sử dụng thụt lề thay vì dấu ngoặc nhọn `{}` để bao các câu lệnh và dấu xuống dòng thay cho chấm phẩy `;` để phân tách chúng. Các ví dụ trong bài viết này mình sẽ dùng cú pháp SCSS cho quen thuộc và dễ làm quen hơn.
>

## Các tính năng cơ bản trong SASS

### Variables

Trong file scss, chúng ta có thể đặt biến và sử dụng lại biến nhiều lần trong file. Điều này rất hữu dụng, vì đôi khi có nhiều nơi bạn muốn dùng chung một style hoặc muốn thay đổi style nhiều nơi một lúc thì bạn chỉ cần thay đổi giá trị của biến. Biến có thể chứa giá trị của `colors`, các `font style` hay nhiều giá trị CSS khác mà bạn muốn sử dụng lại nhiều lần. Để sử dụng biến, bạn thêm `$` trước tên biến và khai báo giá trị cho nó:

```scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
```

### Nesting

Khi viết HTML, bạn có thể thấy rằng cấu trúc code được tổ chức một cách rõ ràng, mạch lạc, các thành phần được phân cấp và lồng vào nhau. CSS được tạo ra để đi cùng với HTML, các thành phần trong CSS cũng đại diện cho các thành phần trong trang HTML tương ứng. Chính vì vậy, SASS cho phép người dùng lồng các CSS selectors lại với nhau để nó có cấu trúc rõ ràng và được phân cấp như HTML.

```scss
// input.scss
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
```

```css
/* output.css */
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}
```

Các bạn có thể thấy `ul`, `li` và `a` selectors được lồng vào trong nav selector. Điều này giúp tổ chức lại code CSS và khiến nó dễ đọc hơn. Nhưng bạn cũng cần lưu ý rằng, việc lạm dụng quy tắc lồng nhau có thể dẫn đến CSS trở nên thừa điều kiện và sẽ khó bảo trì sau này.

### Modules

SASS hỗ trợ modules, bạn có thể tách nhỏ các file scss và kết hợp lại trong một file với cú pháp `@use`. Các file thành phần được đặt tên với kí tự gạch dưới đằng trước (ví dụ `_partial.scss`), điều này đảm bảo SASS biết rằng các file này là thành phần nhỏ và không cần biên dịch ra CSS tương ứng. Ví dụ với modules:

```scss
// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
```

```scss
// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}
```

Như ví dụ trên ta có thể thấy modules không chỉ thêm các styles từ file `_base.scss` vào file `styles.scss` mà còn thêm các biến, chúng ta có thể sử dụng biến bằng tên file (`base.$primary-color`).

> ❗ **Lưu ý:** Chúng ta sử dụng `@use '[tên file]'`, tên file không có dấu gạch chân đằng trước và không cần thêm đuôi file (.scss). Sass sẽ biết điều đấy và thực hiện cho chúng ta.

### Mixins

Như mình đã nói ở trên, Sass cho phép bạn viết CSS giống một ngôn ngữ lập trình hơn và Mixins là một tính năng thể hiện điều đấy. Mixins cho phép bạn tạo một nhóm các câu lệnh CSS và sử dụng nó ở mọi nơi như một biến vậy. Tính chất này khiến mình cảm thấy nó giống một hàm và bạn cũng hoàn toàn có thể truyền tham số vào Mixins. Đây là ví dụ về mixin theme:

```scss
// input.scss
@mixin theme($color, $background) {
  background: $background;
  color: $color;
}

.info {
  @include theme(#fff, blue);
}
.warning {
  @include theme(#000, yellow);
}
.success {
  @include theme(#fff, green);
}
```

```css
/* output.css */
.info {
  background: blue;
  color: #fff;
}

.warning {
  background: yellow;
  color: #000;
}

.success {
  background: green;
  color: #fff;
}
```

Để khai báo một mixin, bạn sử dụng cú pháp `@mixin` và đặt tên cho nó, như mình đặt tên cho mixin ví dụ trên là `theme`. Bạn cũng có thể truyền vào các tham số ở trong dấu ngoặc đơn, ở trên là `$background` và `$color`. Cuối cùng, bạn dùng cú pháp `@include` theo sau là tên mixin và các đối số ở trong thành phần bất kì để sử dụng mixin đã tạo.

### Extend/Inheritance

Trong Sass, một CSS selector có thể kế thừa styles từ một CSS selector khác nhờ sử dụng cú pháp `@extend`.

```scss
// input.scss
.btn {
    border-radius: 1rem;
    border: none;
    color: #fff;
}

.success {
    @extend .btn;
    background: green;
}

.danger {
    @extend .btn;
    background: red;
}
```

```css
/* output.css */
.btn, .success, .danger {
    border-radius: 1rem;
    border: none;
    color: #fff;
}

.success {
    background: green;
}

.danger {
    background: red;
}
```

Trong ví dụ trên, khi biên dịch ra file `output.css`, ta có thể thấy class `.success` và `.danger` đều có các thuộc tính CSS giống class `.btn` và thêm các thuộc tính đặc trưng của riêng nó. Tính năng này giúp bạn có thể hạn chế việc thêm nhiều class vào một thẻ HTML.

### Operators

Với Sass bạn có thể dễ dàng thực hiện tính toán trong CSS, Sass hỗ trợ các toán tử cơ bản như `+, -, *, math.div() và %`. Trong ví dụ dưới, mình sẽ thực hiện tính toán cơ bản chiều rộng của 2 phần tử trong 1 thẻ cha.

```scss
@use "sass:math";

.container {
  display: flex;
}

.item-1 {
  width: math.div(600px, 960px) * 100%;
}

.item-2 {
  width: math.div(300px, 960px) * 100%;
  margin-left: auto;
}
```

## Tạm kết

Qua bài viết trên, các bạn có thể thấy Sass là một trình tiền xử lý CSS vô cùng mạnh mẽ, nó không chỉ giúp bạn tiết kiệm thời gian khi viết CSS mà còn cấu trúc lại code rõ ràng, mạch lạc, trở nên dễ đọc và dễ bảo trì. Những tính năng mình nói đến bên trên mới chỉ là một phần ưu điểm của Sass hay rất nhiều CSS Preprocessors khác, các bạn có thể tìm hiểu nhiều hơn những tính năng khác trên trang web của [Sass](https://sass-lang.com/) hoặc mình sẽ bàn luận sâu hơn trong những bài viết khác nhé. Cảm ơn các bạn đã theo dõi.



CSS là một ngôn ngữ không thể thiếu trong lập trình web, với những dự án lớn và phức tạp về mặt giao diện, code CSS có thể trở nên dài dòng, phức tạp và khó bảo trì. Chính vì vậy, chúng ta cần đến sự trợ giúp của CSS Preprocessor, và một trong những ngôn ngữ được ưa chuộng nhất là SASS.

SASS: Khi CSS được viết như một ngôn ngữ lập trình

Khi nhắc đến xử lý bất đồng bộ trong JavaScript, chắc ai cũng liên tưởng đến một vấn đề của việc sử dụng callback function, đó là **callback hell**, đại khái trông nó sẽ như [thế này](https://images.viblo.asia/2b67c194-4ef8-4879-a44b-410c1b4bddee.png). Qua thời gian, callback bộc lộ nhiều yếu điểm, thời gian hoàn tất tăng lên do các hàm phải "xếp hàng" để chờ nhau thực hiện, cấu trúc code trở nên khá rối và khó bảo trì.

May mắn thay, trong phiên bản ES6, JavaScript mang đến cho người dùng khái niệm **Promise**. Việc viết code bất đồng bộ với cấu trúc Promise và .then() trở nên rất rõ ràng và tường minh, vì vậy cộng đồng nhanh chóng chuyển sang sử dụng Promise thay thế callbacks.

Và ở phiên bản ES7, với sự xuất hiện của **Aync/Await**, viết JavaScript bất đồng bộ còn trở nên dễ dàng và tốt hơn nữa.

## Async/Await là gì?

**Async/Await** là một cách mới để viết code bất đồng bộ, được **Javascript** giới thiệu từ bản cập nhật **ES7**. Nó được xây dựng trên **Promise** và tương thích với tất cả **Promise** dựa trên API. Trong đó được cấu tạo từ 2 thành phần: **async function** và **await**.

### 1. Async functions

Với từ khóa async, chúng ta có thể khai báo hàm bất đồng bộ. Các hàm này có giá trị trả về là một Promise. Mình sẽ minh họa về async với ví dụ sau:

```javascript
async function gdscHust() {
  return "Welcome to GDSC-HUST!"
  //tương đương với return new Promise(resolve => resolve("Welcome to GDSC-HUST!"))
}

gdscHust().then(
    res => console.log(res)
    //in ra Welcome to GDSC-HUST!
)
```

Trong ví dụ trên chúng ta có thể thấy `async` được đặt trước một hàm thông thường để biến thành một hàm bất đồng bộ, giá trị trả về là một Promise nên chúng ta hoàn toàn có thể gọi hàm và xử lý Promise với `.then()` để lấy ra kết quả.

### 2. Await

**Await** sẽ tạm dừng việc thực hiện các hàm async

- Khi đặt trước một Promise, await sẽ khiến các đoạn code còn lại đợi đến khi Promise kết thúc và trả về kết quả.
- Await chỉ làm việc với Promises, nó không hoạt động với callbacks.
- Cho đến phiên bản ES2021, await chỉ được sử dụng bên trong các hàm async. Ở phiên bản ES2022, JavaScript đã mang đến người dùng khái niệm ***top-level async/await*** giúp sử dụng await một cách linh hoạt hơn.

Đễ dễ hình dung, trước khi có async/await chúng ta sẽ xử lý các đoạn code bất đồng bộ với Promises, bây giờ chúng ta sẽ xử lý các đoạn code đó trong hàm async. Sau đây, mình sẽ ví dụ về việc lấy dữ liệu với 2 cách khác nhau: cách thứ 1 với Promises, và cách thứ 2 với Async / Await.

```javascript
// cách 1:
function getJSON() {
  // To make the function blocking we manually create a Promise.
  return new Promise(function (resolve) {
    fetch("https://dummyjson.com/products").then(function (res) {
      // The data from the request is available in a .then block
      // We return the result using resolve.
      resolve(res.json());
    });
  });
}
// cách 2:
// Async/Await approach

// The async keyword will automatically create a new Promise and return it.
async function getJSONAsync() {
  // The await keyword saves us from having to write a .then() block.
  let res = await fetch("https://dummyjson.com/products");

  // The result of fetch request is available in the res variable.
  // We return it just like in a regular synchronous function.
  return res.json();
}
```

Hai hàm trên đều thực hiện fetch dữ liệu với api https://dummyjson.com/products, sau đó trả về một Promise với dữ liệu đã được xử lý. Tuy nhiên, chúng ta có thể thấy cách tiếp cận với Async/Await ngắn hơn và dễ đọc hơn.

Vì giá trị trả về là một Promise nên chúng ta có thể xử lý tiếp như sau:

```javascript
getJSONAsync().then( function(result) {
	// Do something with result.
});
```

## Xử lý lỗi trong Async/Await

Khi xử lý bất đồng bộ, đôi lúc chúng ta sẽ gặp các lỗi không mong muốn, Async/Await cho phép chúng ta sử dụng câu lệnh try/catch để bắt các lỗi. Chúng ta chỉ cần để các await call của chúng ta vào trong khối try/catch, mệnh đề catch sẽ xử lý các lỗi có thể xảy ra bên trong mệnh đề try:

```javascript
async function doSomethingAsync(){
	try {
		// This async call may fail.
		let result = await someAsyncCall();
	}
	catch(error) {
		// If it does we will catch the error here.
	}  
}
```

Trong một vài trường hơp, chúng ta có thể bắt các lỗi khi đang chạy async function. Bởi vì hàm async trả về một Promise, chúng ta chỉ cần thêm `.catch()` để xử lý sau khi gọi hàm.

```javascript
// Async function without a try/catch block.
async function doSomethingAsync(){
    // This async call may fail.
    let result = await someAsyncCall();
    return result;  
}

// We catch the error upon calling the function.
doSomethingAsync().
    .then(successHandler)
    .catch(errorHandler);
```

Bạn nên quen thuộc với một trong hai cách xử lý lỗi và tuân theo nó. Đôi khi sử dụng cả `try/catch` và `.catch()` sẽ dẫn đến những lỗi không mong muốn.

## Tạm kết

Chúng ta vừa đi qua một số khái niệm cơ bản về Async/Await trong JavaScript. Async/Await giúp cho việc xử lý bất đồng bộ trong Js trở nên dễ dàng và ít gặp lỗi hơn. Cảm ơn các bạn đã đọc bài viết, hẹn gặp các bạn ở những bài viết tiếp theo.

Khi nhắc đến xử lý bất đồng bộ trong JavaScript, chắc ai cũng liên tưởng đến một vấn đề của việc sử dụng callback function, đó là **callback hell**, đại khái trông nó sẽ như [thế này](https://images.viblo.asia/2b67c194-4ef8-4879-a44b-410c1b4bddee.png). Qua thời gian, callback bộc lộ nhiều yếu điểm, thời gian hoàn tất tăng lên do các hàm phải "xếp hàng" để chờ nhau thực hiện, cấu trúc code trở nên khá rối và khó bảo trì.

Giới thiệu về Async/Await trong JavaScript

## What is CI/CD?
### Overview
CI/CD is a method to frequently deliver apps to customers by introducing automation into the stages of app development. The main concepts attributed to CI/CD are continuous integration, continuous delivery, and continuous deployment. CI/CD is a solution to the problems integrating new code can cause for development and operations teams (AKA "integration hell"). 
Specifically, CI/CD introduces ongoing automation and continuous monitoring throughout the lifecycle of apps, from integration and testing phases to delivery and deployment. Taken together, these connected practices are often referred to as a "CI/CD pipeline".
### Continuous integration
Developers practicing continuous integration merge their changes back to the main branch as often as possible. The developer's changes are validated by creating a build and running automated tests against the build. By doing so, you avoid integration challenges that can happen when waiting for release day to merge changes into the release branch.
Continuous integration puts a great emphasis on testing automation to check that the application is not broken whenever new commits are integrated into the main branch.
### Continuous delivery
>[Continuous delivery](https://www.atlassian.com/continuous-delivery) is an extension of continuous integration since it automatically deploys all code changes to a testing and/or production environment after the build stage.
This means that on top of automated testing, you have an automated release process and you can deploy your application any time by clicking a button.
In theory, with continuous delivery, you can decide to release daily, weekly, fortnightly, or whatever suits your business requirements. However, if you truly want to get the benefits of continuous delivery, you should deploy to production as early as possible to make sure that you release small batches that are easy to troubleshoot in case of a problem.
### Continuous deployment
Continuous deployment goes one step further than continuous delivery. With this practice, every change that passes all stages of your production pipeline is released to your customers. There's no human intervention, and only a failed test will prevent a new change to be deployed to production.
Continuous deployment is an excellent way to accelerate the feedback loop with your customers and take pressure off the team as there isn't a "release day" anymore. Developers can focus on building software, and they see their work go live minutes after they've finished working on it.
![](https://wac-cdn.atlassian.com/dam/jcr:b2a6d1a7-1a60-4c77-aa30-f3eb675d6ad6/ci%20cd%20asset%20updates%20.007.png?cdnVersion=1309)
### Some popular CI/CD tools
- [GitLab CI/CD](https://docs.gitlab.com/ee/ci/)
- [Azure DevOps](https://azure.microsoft.com/en-us/services/devops/pipelines/)
- [GitHub's Actions](https://github.com/features/actions)
- [CircleCI](https://circleci.com/)
- [Jenkins](https://www.jenkins.io/)
- [Travis CI](https://travis-ci.org/)
- [Bitbucket pipeline](https://bitbucket.org/product/features/pipelines)
- [TeamCity](https://www.jetbrains.com/teamcity/)
## Jenkins
### What Is Jenkins?
Jenkins is an open-source solution comprising an automation server to enable continuous integration and continuous delivery (CI/CD), automating the various stages of software development such as build, test, and deployment.
![](https://images.spiceworks.com/wp-content/uploads/2022/07/05133421/A-Pictorial-Representation-of-the-Jenkins-Interface.png)
### Key Features of Jenkins
![](https://images.spiceworks.com/wp-content/uploads/2022/07/20050527/Key-Features-of-Jenkins.png)
#### A variety of plugins
- Jenkins plugins are extensions to the Jenkins system. Providing integration points for [CI/CD tools,](https://www.spiceworks.com/tech/devops/articles/best-cicd-tools/ "CI/CD tools,") sources and destinations is among the most prevalent plugin applications.
- They also aid with the expansion of Jenkins’ capabilities as well as the integration of Jenkins with other software. Plugins may be downloaded and installed using the Jenkins Web UI or CLI from the Jenkins Plugin repository.
- Nowadays, the Jenkins community reports that there are around 1,500 plugins available for a variety of applications.
#### Simple installation and configuration
- Jenkins is a self-contained Java software that doesn’t care about the platform it’s running on. It runs on all standard operating systems, including Windows, Unix versions, and Mac OS. 
- Jenkins’ online interface is simple to set up and configure, including error checks and a built-in help feature.
#### Extensibility
Jenkins can be extended via its plugin architecture, providing nearly infinite possibilities for what Jenkins can do.
### Jenkins Pipeline
> Jenkins Pipeline (or simply "Pipeline" with a capital "P") is a suite of plugins which supports implementing and integrating _continuous delivery pipelines_ into Jenkins.
#### Jenkinsfile
The definition of a Jenkins Pipeline is written into a text file (called a [`Jenkinsfile`](https://www.jenkins.io/doc/book/pipeline/jenkinsfile)) which in turn can be committed to a project’s source control repository.
A `Jenkinsfile` can be written using two types of syntax — Declarative and Scripted.
Declarative and Scripted Pipelines are constructed fundamentally differently. Declarative Pipeline is a more recent feature of Jenkins Pipeline which:
- provides richer syntactical features over Scripted Pipeline syntax, and
- is designed to make writing and reading Pipeline code easier.
#### Pipeline concepts
##### Pipeline
A Pipeline is a user-defined model of a CD pipeline. A Pipeline’s code defines your entire build process, which typically includes stages for building an application, testing it and then delivering it.
##### Node
A node is a machine which is part of the Jenkins environment and is capable of executing a Pipeline.
Also, a `node` block is a [key part of Scripted Pipeline syntax](https://www.jenkins.io/doc/book/pipeline/#scripted-pipeline-fundamentals).
##### Stage
A `stage` block defines a conceptually distinct subset of tasks performed through the entire Pipeline (e.g. "Build", "Test" and "Deploy" stages), which is used by many plugins to visualize or present Jenkins Pipeline status/progress. [[6](https://www.jenkins.io/doc/book/pipeline/#_footnotedef_6 "View footnote.")]
##### Step
A single task. Fundamentally, a step tells Jenkins _what_ to do at a particular point in time (or "step" in the process). For example, to execute the shell command `make`, use the `sh` step: `sh 'make'`. When a plugin extends the Pipeline DSL, [[1](https://www.jenkins.io/doc/book/pipeline/#_footnotedef_1 "View footnote.")] that typically means the plugin has implemented a new _step_.
```groovy
Jenkinsfile (Declarative Pipeline)
pipeline {
    agent any 
    stages {
        stage('Build') { 
            steps {
                // 
            }
        }
        stage('Test') { 
            steps {
                // 
            }
        }
        stage('Deploy') { 
            steps {
                // 
            }
        }
    }
}
```
## Github Actions
GitHub Actions is a continuous integration and continuous delivery (CI/CD) platform that allows you to automate your build, test, and deployment pipeline. You can create workflows that build and test every pull request to your repository, or deploy merged pull requests to production.
### What is a GitHub Actions workflow?
A _GitHub Actions workflow_ is a process that you set up in your repository to automate software-development lifecycle tasks, including GitHub Actions. With a workflow, you can build, test, package, release, and deploy any project on GitHub.
To create a workflow, you add actions to a .yml file in the `.github/workflows` directory in your GitHub repository.
### The components of GitHub Actions
![](https://learn.microsoft.com/en-us/training/github/github-actions-automate-tasks/media/github-actions-workflow-components.png)
#### Workflows
A workflow is an automated process that you add to your repository. A workflow needs to have at least one job, and different events can trigger it. You can use it to build, test, package, release, or deploy your repository's project on GitHub.
#### Jobs
The job is the first major component within the workflow. A job is a section of the workflow that will be associated with a runner. A runner can be GitHub-hosted or self-hosted, and the job can run on a machine or in a container. You'll specify the runner with the `runs-on:` attribute. Here, you're telling the workflow to run this job on `ubuntu-latest`. We'll talk more about runners in the next unit.
#### Steps
A step is an individual task that can run commands in a job. In our preceding example, the step uses the action `actions/checkout@v2` to check out the repository. What's interesting is the `uses: ./action-a` value. This is the path to the container action that you'll build in an `action.yml` file.
#### Actions
The actions inside your workflow are the standalone commands that are executed. These standalone commands can reference GitHub actions such as using your own custom actions, or community actions like the one we use in the preceding example, `actions/checkout@v2`. You can also run commands such as `run: npm install -g bats` to execute a command on the runner.
## GitHub Actions vs Jenkins
|   |   |   |
|---|---|---|
|**CI/CD tool**|**Pros**|**Cons**|
|**Jenkins**|– Highly customizable and extensible.  <br>– Large community and ecosystem of plugins.  <br>– Supports many programming languages, integrations and platforms.  <br>– Can be deployed locally, on-premise or in the cloud (using different resources like VPS, K8s and more).|– Steep learning curve.  <br>– Requires significant effort to set up and maintain.  <br>– Dedicated resources like DevOps team and others.  <br>– Plugins ecosystem can be complex and difficult to navigate.  <br>– Upgrade process and plugin version control can be frustrating.  <br>– Can be expensive for large-scale and high availability deployments|
|**GitHub Actions**|– Native integration with GitHub.  <br>– Simple and easy-to-use YAML syntax.  <br>– Growing library of pre-built actions.  <br>– Scalable and cost-effective|– Limited plugin support compared to Jenkins.  <br>– Limited customization options.  <br>– Security concerns due to requiring access to GitHub repository.  <br>– Relatively new, so may not have all features required by some organizations.  <br>– Can be expensive/costly if the execution of the Jobs takes a long time because the pricing is based on the execution time (minutes)|

CI/CD is a method to frequently deliver apps to customers by introducing automation into the stages of app development. The main concepts attributed to CI/CD are continuous integration, continuous delivery, and continuous deployment.

CI-CD and Tools

Khi sử dụng JavaScript lập trình web, chúng ta nhiều khi gặp một số trường hợp cần lưu trữ thông tin phía client như thông tin người dùng, theme của trang web, hay một số thông tin hữu dụng khác trong quá trình người dùng thao tác với website. JavaScript cung cấp cho chúng ta ba cơ chế để lưu trữ các thông tin này: **Local Storage, Session Storage và Cookies.** Ở bài viết này, mình sẽ giới thiệu cho các bạn về ba cơ chế này cũng như sự khác biệt giữa chúng nhé.

## Local Storage

Local Storage có thể lưu trữ thông tin giữa các session khác nhau, session ở đây có nghĩa là phiên làm việc của website, dữ liệu đã lưu vào local storage sẽ không bị xóa đi sau khi session kết thúc (có thể hiểu là khi bạn đóng website). Với tính chất này, local storage thường được sử dụng để lưu các settings, user preferences của một website.

Phương thức lưu trữ này có thể lưu đến 10MB dữ liệu, lớn nhất trong 3 loại nhưng có một nhược điểm đó là local storage chỉ có thể lưu được kiểu dữ liệu chuỗi (String).

**Cách lưu và đọc của Local Storage:**

```js
// Lưu dữ liệu vào Local Storage
localStorage.setItem('name', 'koalalikecode');

// Đọc dữ liệu từ Local Storage
const name = localStorage.getItem('name');
console.log(name); // In ra: koalalikecode
```

**Xóa Local Storage:**

```js
// Xóa một biến
localStorage.removeItem(key);

// Xóa toàn bộ trong Local Storage
localStorage.clear();
```

## Session Storage

Session Storage gần như giống hệt Local Storage trừ một điểm là dữ liệu lưu trữ bởi Session Storage sẽ bị xóa sau khi phiên làm dịch của website kết thúc, tức là khi người dùng đóng tab trên trình duyệt.

Cũng từ lý do như trên, mỗi lần chúng ta bật một tab mới là sẽ xuất hiện một session mới ứng với tab đó, vì vậy có thể cùng một trang web nhưng 2 tab khác nhau thì dữ liệu trong session storage cũng sẽ khác nhau.

Session Storage thường ứng dụng để lưu các dữ liệu chỉ tồn tại ở phiên làm việc đó, chẳng hạn như thông tin phiên làm việc của người dùng, hay một số web cần check vị trí của người dùng.

**Cách lưu và đọc của Session Storage**

```js
// Lưu dữ liệu vào Session Storage
sessionStorage.setItem('name', 'koalalikecode');

// Đọc dữ liệu từ Session
const name = sessionStorage.getItem('name');
console.log(name); // Output: koalalikecode
```

**Xóa Session Storage:**

```js
// Xóa một biến
sessionStorage.removeItem(key);

// Xóa toàn bộ trong Session Storage
sessionStorage.clear();
```

## Cookies 🍪🍪🍪

Cookies là các dữ liệu do người dùng tạo ra trong quá trình sử dụng trang web và được lưu ở local machine. Cơ chế này giúp nâng cao trải nghiệm sử dụng web thông qua việc lưu một số thông tin hữu ích như thông tin đăng nhập của người dùng, ngôn ngữ duyệt web,…

Khác với Local Storage và Session Storage chỉ access được dữ liệu ở phía client, cookies cho phép chúng ta access được cả ở client và server (khi tạo một http request thì cookies của browser sẽ được attach vào header Cookie, từ đó phía server có thể parse header này và get được data cookie).

Cookies cho phép lưu trữ tối đa khoảng 4KB và khác với local storage, nó cho phép lưu trữ cả các kiểu dữ liệu khác ngoài chuỗi (có thể là array, object,…). Ngoài ra, cookies có thời gian expire cụ thể, có thể là do lập trình viên cung cấp.

**Cách tạo cookies và đọc cookies**

```js
// Tạo cookies 
document.cookie = 'username=koalalikecode; expires=Fri, 21 Apr 2023 8:00:00 UTC';

// Đọc cookies
let x = document.cookie;
```

Ở ví dụ trên, ta có thể thấy, ngoài giá trị key-value `username`, ta còn có thể cung cấp thời hạn cookies kết thúc bằng `expires` key và value là một thời gian cụ thể. Khi đọc cookies, `document.cookie` sẽ trả lại tất cả cookie trong một chuỗi tring kiểu như: `cookie1 = giá trị; cookie2 = giá trị; cookie3 = giá trị;`

## Bảng so sánh
|Local Storage|Session Storage|Cookies|
|---|---|---|
|Dung lượng lưu trữ 5MB/10MB|Dung lượng lưu trữ 5MB|Dung lượng lưu trữ 4KB|
|Vô thời hạn, chỉ có thể xóa bằng javascript hoặc thủ công|Chỉ tồn tại trong phạm vị session, tab trình duyệt|Cookies hết hạn dựa trên thiết lập ban đầu|
|Chỉ có thể đọc được ở phía client|Chỉ có thể đọc được ở phía client|Có thể đọc được ở cả client và server|
|Không có dữ liệu truyền về server|Không có dữ liệu truyền về server|Có tồn tại dữ liệu truyền về server|


JavaScript cung cấp cho chúng ta ba cơ chế để lưu trữ các thông tin này: Local Storage, Session Storage và Cookies. Ở bài viết này, mình sẽ giới thiệu cho các bạn về ba cơ chế này cũng như sự khác biệt giữa chúng nhé.

📖 Latest Articles

Tags