JavaScript 中將資料寫入檔案
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
。html localStorage.remove('key')
- 如果要清除整個本地儲存,可以使用此方法。
html localStorage.clear()
當瀏覽器標籤頁或瀏覽器本身關閉時,這兩種方法都會執行。