JavaScript 中將資料寫入檔案

Sahil Bhosale 2023年1月30日 2021年10月2日

JavaScript JavaScript File

使用 HTML 5 Web Storage API 在客戶端儲存資料
刪除本地儲存的 Web 儲存資料

HTML5 網路儲存 API 允許我們在客戶端本地儲存資料。需要注意的是，客戶端本地只能儲存少量資料，其最大大小應小於等於 5MB。

如果你使用 Web 儲存 API，則不會在任何給定時間點將資料轉發或傳送回伺服器。它始終在本地檔案中可用。

使用 HTML 5 Web Storage API 在客戶端儲存資料

通常，有兩種型別的 HTML Web 儲存物件用於在客戶端儲存資料。

本地儲存 (window.localStorage)

在本地儲存中，資料將始終可用，即使在瀏覽器視窗關閉後也是如此。當使用者以隱身模式（隱私瀏覽）檢視網頁時，此型別不適用。在這種情況下，資料將在最後一個私人視窗關閉後立即清除。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="company_name"></div>

        <script>
            localStorage.setItem('company', 'Google');
            const storedValue = localStorage.getItem('company');

            let company_name = document.getElementById("company_name");
            company_name.innerHTML = storedValue;
        </script>
    </body>
</html>

首先，我們有一個空的 div 元素，其 id 為 company_name。在這個 div 元素中，我們將顯示值，我們將儲存在本地儲存中。

要在 localStorage 中插入任何值，我們必須以鍵值對的形式傳遞值。你可以使用由本地儲存提供的 setItem 方法來執行此過程。在這種情況下，company 是鍵，而 Google 是值。setItem 方法不會返回任何內容；它只會將值儲存在本地儲存中。

為了取回值，本地儲存為我們提供了 getItem() 方法，該方法將你想要獲取的值的 key 作為引數。然後，我們將結果儲存在名為 storedValue 的變數中。在這一點上，我們在 storedValue 中有值 Google，我們唯一需要做的就是在 div 標籤內顯示這個值。

為此，我們首先必須使用 document.getElementById 方法在其 id 屬性的幫助下獲取 div 元素，並將該 HTML 元素儲存在名為 company_name 的新變數中。

最後，我們將在 innerHTML 屬性的幫助下將 storedValue 變數中的值新增到 div 元素，如 company_name.innerHTML = storedValue。

會話儲存 (window.sessionStorage)

每當你使用會話儲存來儲存資料時，資料將一直可用，直到瀏覽器標籤頁開啟，並在頁面會話結束時清除。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="company_name"></div>

  <script>
    sessionStorage.setItem('company', 'Google');
    const storedValue = sessionStorage.getItem('company');

    let company_name = document.getElementById("company_name");
    company_name.innerHTML = storedValue;
  </script>
    
</body>
</html>

此處的程式碼與本地儲存的程式碼完全相似。唯一的區別是代替 localStorage，我們使用了 sessionStorage。首先，值 Google 將儲存在 sessionStorage 中。稍後可以通過將與該值關聯的 key 傳遞給 getItem() 方法來訪問該值。然後，我們將此值儲存在 storedValue 變數中。最後，我們將此值新增到 div，它將在螢幕上顯示該值。

所有現代瀏覽器都支援這兩種型別。

刪除本地儲存的 Web 儲存資料

正如我們已經看到的，一旦瀏覽器標籤頁或整個瀏覽器關閉，會話儲存就會刪除所有資料。但是，如果出於安全原因或個人需要，你還想刪除本地資料怎麼辦？還有一種方法可以做到這一點。

這裡，有兩種情況：

如果要從本地儲存中刪除特定值，可以使用以下方法。在 remove 方法中，我們必須為要刪除的值傳遞 key。
```
localStorage.remove('key')
```
如果要清除整個本地儲存，可以使用此方法。
```
localStorage.clear()
```

當瀏覽器標籤頁或瀏覽器本身關閉時，這兩種方法都會執行。

Author: Sahil Bhosale

Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.

使用 HTML 5 Web Storage API 在客戶端儲存資料

刪除本地儲存的 Web 儲存資料

相關文章 - JavaScript File