【前端基础】2 - 7 本地存储

§2-7 本地存储

目录

2-7.1 本地存储简述

本地存储允许将数据以键值对的形式在浏览器的会话之间保存。本地存储 localStorage 是个 window 对象的一个只读属性。

另外一个与之类似的存储是绘画存储 sessionStorage，但二者的不同之处在于，localStorage 存储的数据无过期时间，sessionStorage 的数据会在会话结束时（即页面被关闭时）清除。但注意，当隐身模式或无痕浏览窗口下的最后一个隐私标签被关闭时，这些标签所存储的 localStorage 数据将会被清除。

本地存储的特性有：

  • 数据存储在用户浏览器中；
  • 设置、读取方便，页面刷新时也不会丢失数据；
  • 容量较大，sessionStorage 与 localStorage 约 5M 左右；

localStorage 的特性：

  • 可多窗口（页面）共享（同一浏览器内共享）；
  • 以键值对的形式存储使用；
  • 一切数据都以字符串的形式存储；

2-7.2 使用本地存储操作数据

对数据的操作无非四种，即增删改查。localStorage 用于访问当前域（origin）下所存储的数据。

  • 增改数据：localStorage.setItem('key', 'value')；
  • 删除数据：localStorage.removeItem('key')；
  • 删除数据：localStorage.removeItem('key'), localStorage.clear()；

上述操作同样也适用于 seesionStorage，只需要将方法调用的对象修改为 sessionStorage 即可。

示例一：使用本地存储将基本数据类型数据存储到本地。

<body>
    <div class="profile">
        <form action="#" method="post" autocomplete="on" class="profile-form">
            <div class="form-content">
                <label for="name">姓名：</label>
                <input type="text" name="name" id="name" minlength=2 maxlength=25 required/>
            </div>
            <div class="form-content">
                <label for="age">年龄：</label>
                <input type="number" name="age" id="age" min="0" max="100" required/>
            </div>
            <div class="form-content">
                <label for="sex">性别：</label>
                <select name="sex" id="sex" required>
                    <option value="">-- 请选择 ---</option>
                    <option value="male">男</option>
                    <option value="female">女</option>
                </select>
            </div>
            
            <div class="form-content">
                <input type="submit" value="保存"/>
            </div>
        </form>
    </div>
</body>

// 获取表单元素
const name = document.querySelector('#name');
const age = document.querySelector('#age');
const sex = document.querySelector('#sex');
const form = document.querySelector(".profile-form");
form.addEventListener('submit', (e) => {
    // 停止提交行为
    e.preventDefault();
    // 本地存储
    localStorage.setItem('name', name.value);
    localStorage.setItem('age', age.value);
    localStorage.setItem('sex', sex.value);
});

在浏览器内填写表单并点击保存按钮提交后，打开浏览器的开发人员工具，切换到 ”应用程序（Application）“ 选项卡，然后在旁栏中找到 ”本地存储空间“，即可找到该域名下的所有本地存储数据。在这里，我们会看到：

密钥 值
name 张三
age 20
sex male

若要取用本地存储的数据，只需要调用 getItem() 方法，传递键，即可得到其对应的字符串值。

但请注意，使用 setItem() 方法增改键值对时，值将会强制转换为字符串保存。因此，倘若传参时为值参数传入一个对象，对象中的数据往往会因为强制转换为字符串而丢失。

示例二：为解决存储对象时发生数据丢失的问题，采用 JSON 存储到本地。

仍然以上述表单为例，我们将这一则用户信息包装到一个对象中。

const name = document.querySelector('#name');
const age = document.querySelector('#age');
const sex = document.querySelector('#sex');
const form = document.querySelector(".profile-form");
form.addEventListener('submit', (e) => {
    // 停止提交行为
    e.preventDefault();
    // 包装为对象
    const userInfo = {
        name: name.value,
        age: age.value,
        sex: sex.value,
    }
    // 使用内置对象 JSON 将对象数据转化为 JSON 格式化的字符串
    localStorage.setItem('userInfo', JSON.stringify(userInfo));
});

再到浏览器的本地存储空间中查看：

密钥 值
userInfo {"name":"张三","age":"20","sex":"male"}

数据存储的问题解决了，但若要取用其中的数据，我们得到的只能是这一条 JSON 字符串。因此，我们仍然需要借助 JSON，将字符串解析为对象，以获得其中的数据：

const retrieval = JSON.parse(localStorage.getItem('userInfo'));
console.log(retrieval);			// 打印整个对象
console.log(retrieval.name);	// 打印 name 属性
console.log(retrieval.age);		// 打印 age 属性
console.log(retrieval.sex);		// 打印 sex

注意，对象中存储的属性仍然是字符串，可根据需要转换成所需的数据类型。

2-7.X 外部链接

Window: localStorage property - Web APIs | MDN (mozilla.org)

Window: sessionStorage property - Web APIs | MDN (mozilla.org)

posted @ 2024-03-26 22:51  Zebt  阅读(17)  评论(0)    收藏  举报