【Web APIs】浏览器本地存储 ② ( window.sessionStorage 本地存储常用 API 简介

文章目录

一、浏览器本地存储
- [1、存储 / 修改数据](#1、存储 / 修改数据)
- 2、读取数据
- 3、删除指定数据
- 4、清空所有数据
- 5、根据索引获取键名
- 6、获取键值对数量
[二、代码示例 - window.sessionStorage 本地存储](#二、代码示例 - window.sessionStorage 本地存储)
- 1、代码示例
- 2、执行结果

一、浏览器本地存储

window.sessionStorage 浏览器本地存储的所有常用 API 都简单且直观 , 以 " 增、删、改、查 " 为核心 , 且所有操作仅作用于当前浏览器标签页 , 符合 sessionStorage " 会话级、标签页隔离 " 的特性 ;

1、存储 / 修改数据

window.sessionStorage#setItem(key, value) : 用于存储 / 修改数据 ( 增 / 改 ) , 向 sessionStorage 浏览器存储中添加新的 key - value 键值对 , 若 key 已存在 , 则覆盖原有值 ;

参数 :
- key : 字符串类型 , 唯一标识 ( 不能重复 ) , 用于后续读取 / 删除数据 ;
- value : 必须是字符串类型 , 若存储对象 / 数组 , 需先通过 JSON.stringify() 序列化 ;
返回值 : 无返回值 ;
使用案例 :

javascript 复制代码

// 1. 存储普通字符串
window.sessionStorage.setItem('temp_form_name', '李四');

// 2. 存储对象 ( 需先序列化 ) 
const tempUser = { id: 101, phone: '13800138000' };
window.sessionStorage.setItem('temp_user', JSON.stringify(tempUser));

// 3. 覆盖已有数据 ( key重复时 ) 
window.sessionStorage.setItem('temp_form_name', '王五'); // 原"李四"被替换为"王五"

2、读取数据

window.sessionStorage#getItem(key) : 用于读取数据 ( 查 ) , 根据指定的 key 读取 sessionStorage 本地存储中的值 ;

参数 key : 字符串类型 , 要读取的键名 ;
返回值 :
- 若 key 存在 , 返回对应的字符串值 ;
- 若 key 不存在 , 返回 null , 直接对 null 反序列化会报错 , 建议加容错 ;
代码示例 :

javascript 复制代码

// 1. 读取普通字符串
const name = window.sessionStorage.getItem('temp_form_name');
console.log(name); // 输出 : 王五

// 2. 读取对象 ( 需反序列化 , 加容错 ) 
const userStr = window.sessionStorage.getItem('temp_user');
// 容错 : 若key不存在 ( userStr为null )  , 则返回空对象
const user = userStr ? JSON.parse(userStr) : {};
console.log(user.phone); // 输出 : 13800138000

// 3. 读取不存在的key
const nonExist = window.sessionStorage.getItem('abc');
console.log(nonExist); // 输出 : null

3、删除指定数据

window.sessionStorage#removeItem(key) : 用于删除指定数据 ( 删 ) , 根据 key 删除 sessionStorage 中对应的键值对 ; 若 key 不存在 , 该操作无效果 ,不会报错 ;

参数 key : 字符串类型 , 要删除的键名 ;
返回值 : 无返回值 ;
代码示例 :

javascript 复制代码

// 删除指定key的数据
window.sessionStorage.removeItem('temp_form_name');
// 验证 : 读取已删除的key , 返回null
console.log(window.sessionStorage.getItem('temp_form_name')); // 输出 : null

// 删除不存在的key ( 无报错 ) 
window.sessionStorage.removeItem('abc');

4、清空所有数据

window.sessionStorage#clear() : 用于清空所有数据 ( 全删 ) , 清空当前标签页下 sessionStorage 的所有键值对 ( 仅当前标签页 , 不影响同域名其他标签 ) ;

参数 : 无参数 ;
返回值 : 无返回值 ;
代码示例 :

javascript 复制代码

// 清空所有数据
window.sessionStorage.clear();
// 验证 : 所有key都读取不到
console.log(window.sessionStorage.getItem('temp_user')); // 输出 : null

5、根据索引获取键名

window.sessionStorage#key(index) : 用于根据索引获取键名 , 根据数字索引 ( 从 0 开始 ) , 获取 sessionStorage 中对应位置的键名 ;

参数 index : 数字类型 , 索引值 , 0 对应第一个键值对 , 1 对应第二个 , 以此类推 ;
返回值 :
- 若索引有效 , 返回对应键名字符串 ;
- 若索引越界 , 返回 null ;
代码示例 :

javascript 复制代码

// 先存储两条数据
window.sessionStorage.setItem('a', '1');
window.sessionStorage.setItem('b', '2');

// 获取索引0的键名
console.log(window.sessionStorage.key(0)); // 输出 : a
// 获取索引1的键名
console.log(window.sessionStorage.key(1)); // 输出 : b
// 索引越界 , 返回null
console.log(window.sessionStorage.key(2)); // 输出 : null

6、获取键值对数量

window.sessionStorage#length : 获取键值对数量 , 这是一个属性值 , 非函数 , 返回当前 sessionStorage 中键值对的总数量 ;

注意 : 该属性是只读属性 , 不能赋值 ;
调用方式 : 无需调用 , 直接访问即可 ;
代码示例 :

javascript 复制代码

// 存储两条数据后 , length为2
console.log(window.sessionStorage.length); // 输出 : 2

// 删除一条后 , length变为1
window.sessionStorage.removeItem('a');
console.log(window.sessionStorage.length); // 输出 : 1

二、代码示例 - window.sessionStorage 本地存储

1、代码示例

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="del">删除数据</button>
    <button class="clr">清空数据</button>
    <script>
        // 获取页面中的输入框元素
        var ipt = document.querySelector('input');

        // 获取页面中类名为 set 的按钮 ( 用于设置存储 ) 
        var set = document.querySelector('.set');
        // 获取页面中类名为 get 的按钮 ( 用于获取存储 ) 
        var get = document.querySelector('.get');
        // 获取页面中类名为 del 的按钮 ( 用于删除指定存储 ) 
        var del = document.querySelector('.del');
        // 获取页面中类名为 clr 的按钮 ( 用于清空所有存储 ) 
        var clr = document.querySelector('.clr');

        // 为"设置"按钮绑定点击事件
        set.addEventListener('click', function() {
            // 获取输入框中的用户输入值
            var val = ipt.value;
            // 向 sessionStorage 中存储键为 uname、值为输入框内容的数据
            sessionStorage.setItem('uname', val);
        });

        // 为"获取"按钮绑定点击事件
        get.addEventListener('click', function() {
            // 从sessionStorage中获取键为uname的值 , 并打印到控制台
            console.log(sessionStorage.getItem('uname'));
        });

        // 为"删除"按钮绑定点击事件
        del.addEventListener('click', function() {
            // 从sessionStorage中删除键为uname的存储数据
            sessionStorage.removeItem('uname');
        });

        // 为"清空"按钮绑定点击事件
        clr.addEventListener('click', function() {
            // 清空sessionStorage中的所有存储数据
            sessionStorage.clear();
        });
    </script>
</body>

</html>

2、执行结果

在表单中输入 Tom , 点击存储数据 , 即可在开发者模式 Application 中的 session storage 中看到 uname - Tom 键值对 ;

点击获取数据按钮 , 可以在 Console 控制台打印出对应的 uname 对应的 value 值 ;

点击删除数据按钮 , 可以删除 uname 键值对 ;

点击清空数据按钮 , 可以清空 session storage 的所有键值对数据 ;

【Web APIs】浏览器本地存储 ② ( window.sessionStorage 本地存储常用 API 简介 | 代码示例 )

文章目录

一、浏览器本地存储

1、存储 / 修改数据

2、读取数据

3、删除指定数据

4、清空所有数据

5、根据索引获取键名

6、获取键值对数量

二、代码示例 - window.sessionStorage 本地存储

1、代码示例

2、执行结果