带你掌握开发者必备的WebStorageAPI,客户端案例细讲

localStorage&sessionStorage统称为WebStorage，API相同，掌握一个，即掌握两个，WebStorage 是浏览器提供的一种用于在客户端存储数据的机制。它允许你在用户的浏览器中存储数据，并且该数据在用户关闭浏览器后仍然保留。这意味着即使用户关闭了浏览器，下次打开时仍然可以访问存储的数据，下面以localStorage为例，详细介绍下localStorage哈，后面有简单的综合案例让大家明白这一重点

使用方法

存储数据

要在 localStorage 中存储数据，你可以使用以下步骤：

将数据转换为 JSON 格式（如果需要）。
使用 localStorage.setItem(key, value) 方法将数据存储到本地。

// 示例：存储一个名字
localStorage.setItem('name', '小索奇');

// 示例：存储一个对象
let person = { name: '小索奇', age: 8 };
localStorage.setItem('person', JSON.stringify(person)); 

读取数据

要从 localStorage 中读取数据，你可以使用以下步骤：

使用 localStorage.getItem(key) 方法获取存储在本地的数据。
如果需要，将从 localStorage 中获取的数据转换为相应的格式（如 JSON）

// 示例：读取名字
let name = localStorage.getItem('name');

// 示例：读取一个对象
let jsonPerson = localStorage.getItem('person');
let person = JSON.parse(jsonPerson);

删除数据

要删除 localStorage 中的数据，你可以使用以下步骤：

// 示例：删除一个名字
localStorage.removeItem('name');

// 示例：清空所有数据
localStorage.clear();

下面是一个包括存储、读取和删除数据的完整示例：

    
    
    




    

        
localStorage示例
        保存数据
        读取数据
        删除数据
        清空所有数据
    

    
    

保存

读取

删除

• 当我们点击clear的时候也是一样的删除原理，clear是清空（删除）全部数据