JavaScript 本地存储

1 概述

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

 

2 特点

(1) 数据存储在用户浏览器中。

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

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

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

 

3 window.sessionStorage

(1) 特点

生命周期为关闭浏览器窗口(即关闭该页面标签，不是关闭浏览器)。

在同一个窗口(页面标签)下数据可以共享。

以键值对的形式存储使用。

(2) 常用方法

存储数据：sessionStorage.setItem('key',value);

获取数据：sessionStorage.getIteml('key');

删除数据：sessionStorage.removeItem('key');

删除所有数据：sessionStorage.clear();

 

4 window.localStorage

(1) 特点

生命周期永久生效，除非手动删除否则关闭页面也会存在。

可以多窗口(页面)共享(同一浏览器可以共享)。

以键值对的形式存储使用。

(2) 常用方法

存储数据：localStorage.setItem('key',value);

获取数据：localStorageg.etItem('key');

删除数据：localStorage.removeItem('key');

删除所有数据：localStorage.clear();

 

5 记住用户名案例

(1) 核心思路

把数据存起来，用到本地存储。

关闭页面，也可以显示用户名，所以用到localstorage。

打开页面，先判断是否有这个用户名，如果有，就在表单里面显示用户名，并且勾选复选框。

当复选框发生改变的时候change事件。

如果勾选，就存储，否则就移除。

(2) 代码实现

<input type="text" id="username"><input type="checkbox" id="remember">记住用户名
<script>
	var username = document.querySelector("#username");
	var remember = document.querySelector("#remember");
	if(locaklStorage.getItem('username')){
		username.value = localStorage.getItem('username');
		remember.checked = true;
	}
	remember.addEventListener('change',function(){
		if(this.checked){
			localStorage.setItem('username',username.value);
		}else{
			localStorage.removeItem('username');
		}
	}
</script>