Web APIs 学习笔记（九）--- 本地存储：sessionStorage 和 localStorage

一、本地存储的特性

	1. 数据储存在用户本地的浏览器中。
	2. 存储、读取方便，甚至可以永久存储。
	3. 容量适中，sessionStorage 约 5MB大小、localStorage约5MB大小。
	4. 只能存储字符串，可以通过 JSON.stringify() 将其他类型数据转换成JSON字符串，然后再进行存储。

二、sessionStorage

1、特性

	1. 生命周期为关闭浏览器窗口，也就是说： 通过sessionStorage 存储的数据，在浏览器关闭以后就被清除了，不可再使用了。
	2. 数据共享的范围是当前窗口（页面），同个浏览器的其他页面是无法读取该页面存储的数据的。
	3. 以键值对的形式存储数据。

2、语法

存储数据：

​ sessionStorage.setItem(key,value);

获取数据：

​ sessionStorage.getItem(key);

删除数据：

​ sessionStorage.removeItem(key);

清空所有数据：

​ sessionStorage.clear();

3、案例代码

// 存储数据
sessionStorage.setItem('uname','Tom')
// 获取数据
sessionStorage.getItem('uname'); // TOM
// 删除数据
sessionStorage.removeItem('uname');
//清空所有数据
sessionStorage.clear();

三、localStorage

1、特性

1. 生命周期永久有效，除非被删除，否则关闭页面、关闭浏览器后，数据依然存在。
2. 同一浏览器的不同页面可以共享数据，可以用来在页面之间传值。
3. 以键值对的形式存储数据。

2、语法

存储数据：

​ localStorage.setItem(key,value);

获取数据：

​ localStorage.getItem(key);

删除数据：

​ localStorage.removeItem(key);

清空所有数据：

​ localStorage.clear();

3、案例代码

// 要求：如果勾选记住用户名， 下次用户打开页面，就在文本框里面自动显示上次登录的用户名 
// 如果取消勾选，则删除存储的数据，并且下次打开页面 文本框为空

<input type="text" id="username">
<input type="checkbox" name="" id="remember"> 记住用户名

<script>
    var username = document.querySelector('#username');
    var checkbox = document.querySelector('#remember');
    if(localStorage.getItem('username')){
        username.value = localStorage.getItem('username');
        checkbox.checked = true;
    }
    checkbox.addEventListener('change',function () {
        if(this.checked) {
            localStorage.setItem('username',username.value);
        } else {
            localStorage.removeItem('username');
        }
    })
</script>