15. JavaScript 的本地操作都能干些啥？JavaScript 的本地操作，主要涉及数据的本地存储

JavaScript 的本地操作都能干些啥？

在 JavaScript 中，本地操作 主要涉及到数据在用户 本地设备（如浏览器所在的计算机或移动设备）上的存储和读取。

这使得网页应用能够在 不同的会话之间 记住用户的一些信息或者设置，增强了 用户体验。主要的本地存储方式有 localStorage 和 sessionStorage。

`localStorage` 对象

localStorage 提供了一种 持久化存储数据 的方式，数据存储在用户的 浏览器中，即使关闭浏览器窗口或者标签页，数据依然存在，除非用户手动 清除浏览器缓存 或者通过 JavaScript 代码清除 数据。

它是以 键 - 值对（key - value pair）的形式存储数据的。

存储数据

// 示例代码 1
localStorage.setItem("userName", "John");
localStorage.setItem("userAge", 25);

可以存储 各种类型 的数据，包括 字符串、数字、布尔值 等。不过，存储 非字符串 的数据时，会先将其转换为 字符串。

上面代码中（示例代码 1），存储一个数字 25，- 实际上是将数字 25 转换为 字符串 "25" 进行存储。

读取数据

// 示例代码 2
let userName = localStorage.getItem("userName");
console.log(userName); // "John"

如果要读取 不存在的键 对应的内容，会返回 null。

删除数据和清空存储

可以使用 localStorage.removeItem() 方法删除 指定键的 数据。

// 示例代码 3
localStorage.removeItem("userAge");

如果要清空 localStorage 中的 所有数据，可以使用 localStorage.clear() 方法。不过，要谨慎使用这个方法，因为它会删除 所有存储的键 - 值对。

`sessionStorage` 对象

sessionStorage 的 使用方法 和 localStorage 类似，也是以 键 - 值对 的形式存储数据。但是，sessionStorage 的数据只在 当前会话（session）中有效。会话是指从用户 打开浏览器窗口 或者标签页，到 关闭这个窗口 或者标签页的 这段时间。

例如，存储一个当前页面的访问次数：

// 示例代码 4
if (sessionStorage.getItem("visitCount") === null) {
    sessionStorage.setItem("visitCount", 1);
} else {
    var count = parseInt(sessionStorage.getItem("visitCount"));
    sessionStorage.setItem("visitCount", count + 1);
}

本地文件操作（有限制）

在 浏览器环境 下，JavaScript 对本地文件的 直接操作受到严格限制，这是出于安全考虑。但是，在一些 HTML5 应用场景 下，通过 File 和 FileReader 等对象可以在 用户授权 的情况下对本地文件进行 有限的操作。

<input type="file" id="fileInput">

const fileInput = document.getElementById("fileInput");
fileInput.addEventListener("change", function() {
  let file = fileInput.files[0];
  let reader = new FileReader();
  reader.onload = function() {
      console.log(reader.result);
  };
  reader.readAsText(file);
});

当用户选择一个文件后，FileReader 对象会读取 文件内容（这里是将文件内容作为文本读取），并在onload 事件处理函数中输出文件内容。

本地文件上传

<!-- 创建一个文件选择的input元素 -->
<input type="file" id="fileInput">
<!-- 创建一个按钮用于触发上传操作（这里只是模拟，实际可能关联真正的上传逻辑） -->
<button onclick="uploadFile()">Upload File</button>
<!-- 用于显示上传结果的div -->
<div id="result"></div>

function uploadFile() {
    // 获取文件选择input元素
    const fileInput = document.getElementById('fileInput');
    // 获取用户选择的文件（files是一个类数组对象，这里取第一个文件，若允许多选可做循环处理）
    const file = fileInput.files[0];
    if (file) {
        // 获取文件名
        let fileName = file.name;
        // 获取文件大小（单位为字节）
        let fileSize = file.size;
        // 获取文件类型
        let fileType = file.type;
        // 在页面上显示文件相关信息（简单示例，实际可做更多复杂展示或上传等操作）
        const resultDiv = document.getElementById('result');
        resultDiv.innerHTML = `
            <p>文件名: ${fileName}</p>
            <p>文件大小: ${fileSize} 字节</p>
            <p>文件类型: ${fileType}</p>
        `;
    } else {
        alert('请选择要上传的文件');
    }
}

15. JavaScript 的 本地操作 都能干些啥？

JavaScript 的 本地操作 都能干些啥？

localStorage 对象

存储数据

读取数据

删除数据 和 清空存储

sessionStorage 对象