JavaScript 中將資料寫入檔案

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

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

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

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

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

  1. 本地儲存 (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 元素,其 idcompany_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

  1. 會話儲存 (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 儲存資料

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

這裡,有兩種情況:

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

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

相關文章 - JavaScript File

  • 在 JavaScript 中獲取副檔名
  • 在 JavaScript 中逐行讀取檔案