前端本地存储

为什么需要本地存储?

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

本地存储的特性

1、数据存储在用户浏览器中

2、设置、读取方便、甚至页面刷新不丢失数据

3、容量较大，sessionStorage约5M、localStorage约20M

4、只能存储字符串，可以将对象JSON.stringify() 编码后存储

1.window.sessionStorage

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

(1) 添加数据

sessionStorage.setItem(key,value)

	        sessionStorage.setItem('username', '张三');
            sessionStorage.setItem('age', 18);

(2) 获取数据

sessionStorage.getItem(key)

			var getName = sessionStorage.getItem('username');
			console.log(getName);
			var getAge = sessionStorage.getItem('age');
			console.log(getAge);

(3)删除数据

sessionStorage.removeItem(key)

			sessionStorage.removeItem('username');
			sessionStorage.removeItem('age');

(4)清空数据

sessionStorage.clear()

			sessionStorage.clear();

2.window.localStorage

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

(1).添加数据

localStorage.setItem(key,value)

			localStorage.setItem('username', '张三');
            localStorage.setItem('age', 18);

(2).获取数据

localStorage.getItem(key)

			localStorage.getItem('username');

(3). 删除数据

localStorage.removeItem(key)

			localStorage.removeItem('username');

(4).清空数据

localStorage.clear()

			localStorage.clear();

记住用户名案例:

    <input type="text" id="username"> <input type="checkbox" id="check">记住用户名
	<script>

        var username = document.querySelector('#username');
        var remember = document.querySelector('#check');

        // 判断本地存储是否有username
        if (localStorage.getItem('username')) {
            // 有的话把获取到的usename给表单
            username.value = localStorage.getItem('username');
            // 并且将复选框勾上
            remember.checked = true;
        }
        // change事件,状态变化
        remember.addEventListener('change', function () {
            // 判断复选框是否是选中状态
            if (this.checked) {
                // 复选框选上的话将表单的值设置成username
                localStorage.setItem('username', username.value);
            } else {
                // 未选上则删除username
                localStorage.removeItem('username');
            }
        })
    </script>