JavaScript 中 getItem 方法详解
<h1 id="javascript-中-getitem-方法详解">JavaScript 中 getItem 方法详解</h1><p>你想了解的 JavaScript 中的 <code>getItem</code> 方法，核心是用于<strong>从浏览器的存储对象中读取指定键（key）对应的存储值（value）</strong>，最常用在 Web 存储相关的 API 中，下面分核心知识点详细说明：</p>
<h2 id="一核心使用场景两大存储对象">一、核心使用场景：两大存储对象</h2>
<p><code>getItem</code> 并非全局通用方法，主要绑定在浏览器提供的两个存储对象上，也是日常开发的核心场景：</p>
<ol>
<li><code>localStorage</code>：永久存储（除非手动删除或清理浏览器数据，否则数据会一直保留在本地）</li>
<li><code>sessionStorage</code>：会话存储（仅在当前浏览器标签页有效，标签页关闭后数据自动销毁）</li>
</ol>
<p>这两个对象的 <code>getItem</code> 用法完全一致，仅存储有效期不同。</p>
<h2 id="二基本语法">二、基本语法</h2>
<p>语法格式非常简洁，参数和返回值有明确规范：</p>
<pre><code class="language-javascript">// 通用语法
存储对象.getItem(keyName);
</code></pre>
<ul>
<li><strong>参数 <code>keyName</code></strong>：必需，字符串类型（String），表示你要读取的存储数据对应的「键名」（存储时已定义的唯一标识）。</li>
<li><strong>返回值</strong>：
<ul>
<li>如果存在对应 <code>keyName</code> 的数据，返回该数据对应的「字符串值」（所有 Web 存储的数据都会被自动序列化为字符串格式存储）；</li>
<li>如果不存在对应 <code>keyName</code>（键名不存在或未存储该数据），返回 <code>null</code>（这是判断某个键是否存在的重要依据）。</li>
</ul>
</li>
</ul>
<h2 id="三完整代码示例">三、完整代码示例</h2>
<p>下面通过 <code>localStorage</code> 演示 <code>getItem</code> 的完整使用（<code>sessionStorage</code> 用法完全替换即可）：</p>
<pre><code class="language-javascript">// 第一步：先通过 setItem 存储数据（搭配 getItem 使用，模拟实际开发场景）
localStorage.setItem("userName", "张三"); // 存储键名：userName，键值：张三
localStorage.setItem("userAge", "25"); // 存储数字时，也会自动转为字符串
localStorage.setItem("userInfo", JSON.stringify({ id: 1, gender: "男" })); // 存储对象需先序列化
// 第二步：通过 getItem 读取数据
const userName = localStorage.getItem("userName");
const userAge = localStorage.getItem("userAge");
const userInfo = JSON.parse(localStorage.getItem("userInfo")); // 读取对象需反序列化
const nonExistKey = localStorage.getItem("unKnownKey"); // 读取不存在的键
// 第三步：打印结果
console.log(userName); // 输出："张三"（字符串类型）
console.log(userAge); // 输出："25"（字符串类型，注意不是数字 25）
console.log(userInfo); // 输出：{ id: 1, gender: "男" }（还原为对象）
console.log(nonExistKey); // 输出：null（键不存在时返回 null）
// 可选：删除存储（辅助理解）
localStorage.removeItem("userName");
console.log(localStorage.getItem("userName")); // 输出：null（删除后读取也返回 null）
</code></pre>
<h2 id="四补充说明">四、补充说明</h2>
<ol>
<li><strong>数据类型限制</strong>：Web 存储仅支持字符串格式存储，因此读取非字符串类型（对象、数组、数字等）时，需要配合 <code>JSON.stringify</code>（存储时）和 <code>JSON.parse</code>（读取后）进行转换，否则会读取到无效格式。</li>
<li><strong>兼容性</strong>：支持所有现代浏览器，以及 IE8 及以上版本，无需额外兼容处理。</li>
<li><strong>区别于其他 <code>getItem</code></strong>：部分其他 API 也有 <code>getItem</code> 方法（如 Cookie 相关、IndexedDB 等），但 Web 开发中最常用的仍是 <code>localStorage</code> 和 <code>sessionStorage</code> 上的 <code>getItem</code>，其核心逻辑都是「按键取值」，仅API细节略有差异。</li>
</ol>
<h3 id="总结">总结</h3>
<ol>
<li><code>getItem</code> 核心功能：从浏览器 <code>localStorage</code>/<code>sessionStorage</code> 中按键名读取存储值；</li>
<li>关键特性：参数为字符串键名，存在对应数据返回字符串值，不存在返回 <code>null</code>；</li>
<li>核心用法：配合 <code>setItem</code> 存储数据，读取对象/数组时需用 <code>JSON.parse</code> 反序列化。</li>
</ol>
</div>
<div id="MySignature" role="contentinfo">
<p>本文来自博客园，作者：代码改变世界—北枳，转载请注明原文链接：https://www.cnblogs.com/D1DCD/p/19416177</p><br><br>
来源：https://www.cnblogs.com/D1DCD/p/19416177
頁:
[1]