1.浏览器存储

1. Cookie: 这是最早的浏览器存储方法。Cookie 数据在每次请求时都会被发送到服务器，因此不适合存储大量数据，通常用于存储诸如会话（登录状态）、个性化设置等信息。Cookie 数据的大小和数量都有限制。
2. LocalStorage 和 SessionStorage: 这两种浏览器存储方式是 HTML5 引入的，它们的储存上限远远大于 Cookie，且不会随请求被送到服务器。区别在于，LocalStorage 的数据是永久的，而 SessionStorage 的数据只在当前会话期间存在，用户关闭浏览器后，SessionStorage 的数据就会消失。

LocalStorage

LocalStorage 是 HTML5 提供的一种在客户端存储数据的方式。它的操作主要借助以下几个方法：

1. 增加数据：使用 localStorage.setItem(key,value) 方法，它接收两个参数，一个是键名，一个是值，都需要以字符串的形式存储。

localStorage.setItem('name', 'smartMuggle');

2. 删除数据：使用 localStorage.removeItem(key) 方法，它接收一个参数，就是你要删除的数据的键名。

localStorage.removeItem('name');

3. 修改数据：与增加数据使用的是同一个方法，如果使用 setItem() 方法存储了同名的键，则新的值会覆盖旧的值。

localStorage.setItem('name', 'newSmartMuggle');

4. 查看数据：使用 localStorage.getItem(key) 方法，它接收一个参数，就是你要获取的数据的键名，返回对应的键值。

let name = localStorage.getItem('name');
console.log(name);  // 输出: newSmartMuggle

5. 查看所有数据：使用 localStorage.length 可以获取存储在 localStorage 里的数据条数，结合 localStorage.key(index) 可以遍历所有数据。

for(let i = 0; i < localStorage.length; i++){
    let key = localStorage.key(i);
    let value = localStorage.getItem(key);
    console.log(`${key}: ${value}`);
}

6. 清空所有数据：使用localStorage.clear可以清空存储在localStorage里所有的数据。

localStorage.clear();

需要注意的是，LocalStorage 存储的是永久性的数据（除非用户手动清除或者用代码删除），而且这些数据只会存在于用户的浏览器中，不会发送到服务器。

SessionStorage

API和localstorage一致。

• setItem
• getItem
• removeItem
• clear

#