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

  • 在 Chrome 中创建和运行 JavaScript 文件
  • JavaScript Map 文件
  • 使用 JavaScript 打开本地文本文件