JavaScript-本地存储

（七）本地存储

1. 本地存储概述

1.1 背景

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经
常性在本地存储大量的数据，HTML5 规范提出了相关解决方案。

1.2 本地存储特性

• 数据存储在用户浏览器中
• 设置、读取方便、甚至页面刷新不丢失数据
• 容量较大，sessionStorage 约5M、localStorage 约20M
• 只能存储字符串，可以将对象 JSON.stringify() 编码后存储

2. window.sessionStorage

2.1 特点

• 生命周期为 关闭浏览器窗口
• 在同一个窗口（页面）下数据可以共享
• 以键值对的形式存储使用

2.2 相关操作

1. 存储数据：

   sessionStorage.setItem(key, value)
   

2. 获取数据：

   sessionStorage.getItem(key)
   

3. 删除数据：

   sessionStorage.removeItem(key)
   

4. 删除所有数据：

   sessionStorage.clear()
   

3. window.localStorage

3.1 特点

• 生命周期 永久生效，除非手动删除否则关闭页面也会存在
• 可以多窗口（页面）共享（同一浏览器可以共享）
• 以键值对的形式存储使用

3.2 相关操作

1. 存储数据：

   localStorage.setItem(key, value)
   

2. 获取数据：

   localStorage.getItem(key)
   

3. 删除数据：

   loaclStorage.removeItem(key)
   

4. 删除所有数据：

   localStorage.clear()
   

4. 案例：记住用户名

4.1 分析

如果勾选记住用户名，下次用户打开浏览器，就在文本框里面自动显示上次登录的用户名。

• 把数据存起来，用到本地存储
• 关闭页面，也可以显示用户名，所以用到 localStorage
• 打开页面，先判断是否有这个用户名，如果有，就在表单里面显示用户名，并且勾选复选框
• 当复选框发生改变的时候 change 事件
• 如果勾选，就存储，否则就移除

4.2 代码

let nameInput = document.querySelector('#username');
let remember = document.querySelector('#remember');
if (localStorage.getItem('username')) {
    nameInput.value = localStorage.getItem('username');
    remember.checked = true;
}
remember.addEventListener('change', function () {
    if (remember.checked) {
        localStorage.setItem('username', nameInput.value);
    } else {
        localStorage.removeItem('username');
    }
})