【前端】【H5 API】Web存储 Web Storage
Web存储
传统的方式是使用document.cookie来进行存储，但是由于其存储空间有限（大约4KB），并且需要复杂的操作来解析，给开发者带来了诸多不便。
为此，HTML 5规范提出了网络存储的相关解决的方案，即Web Storage（Web存储）和本地数据库Web SQL Database。
Web Storage API
关键对象
window.sessionStorage对象用于区域存储；window.localStorage对象用于本地存储。
特点
- 数据的设置和读取比较方便。
- 容量较大，
sessionStorage大约为5MB，localStorage大约为20MB。 - 只能存储字符串，若想要存储JSON对象，则可以使用
window.JSON.stringify()或者parse()进行序列化和反序列化编码
优势
- 减少网络流量的使用。
- 使用Web Storage，一旦数据保存在本地后，就可以避免再次向服务器请求数据。因此减少了不必要的数据请求，同时也减少了数据在浏览器和服务器间不必要地来回传递。
- 能够快速显示数据。
- 使用Web Storage性能好，因为从本地读数据比通过网络从服务器获得数据速度要快很多，可以即时获得本地数据。再加上网页本身也可以有缓存，因此如果整个页面和数据都在本地，则可以立即显示。
- 可以临时存储数据
在很多时候，数据只需要在用户浏览一组页面期间使用，而关闭窗口后数据就可以丢弃。这种情况使用sessionStorage非常方便。
方法属性
由于
sessionStroage对象和localStorage对象都是Storage的实例，所以都可以使用Storage接口提供的方法和属性。Web Storage接口中提供了一些方法和属性，如表所示。
| 方法/属性 | 描述 |
|---|---|
| key(n) | 该方法用于返回存储对象中第n个key的名称 |
| setItem(key, value) | 该方法接收一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值 |
| getItem(key) | 该方法接收一个键名作为参数，返回键名对应的值 |
| removeItem(key) | 该方法删除键名为key的存储内容 |
| clear() | 该方法清空所有存储内容 |
| length | 该属性返回Storage存储对象中包含的item的数量 |
sessionStorage
sessionStorage主要用于区域存储，区域存储是指数据只在单个页面的会话期内有效。session就是会话的意思，比如现实生活中，打电话时从拿起话筒拨号到挂断电话之间的一系列过程可以称为一次会话。在Web开发中，一次会话是指一个浏览器窗口从打开到关闭的过程。如果关闭浏览器，那么会话就将结束。sessionStorage的数据是保存在浏览器的内存中的。当浏览器关闭后，内存将被自动清除。
sessionStorage中存储的数据只在当前浏览器窗口有效。如果只想将数据保存在当前会话中，可以使用 sessionStorage 属性。
localStorage
localStorage作为HTML5 Web Storage的API之一，主要作用是本地存储。localStorage可以将数据按照键值对的方式保存在客户端计算机中，直到用户或者脚本主动清除数据，否则该数据会一直存在。也就是说，使用了本地存储的数据将被持久化保存。
localStorage的优势在于拓展了Cookie的4 KB限制，并且可以将第一次请求的数据直接存储到本地。其容量相当于一个5 MB大小的数据库。相比于Cookie会在每个请求头中发送，localStorage不会在请求头中发送，可以节约带宽。
区别localStorage和sessionStorage
localStorage与sessionStorage唯一的区别就是存储数据的生命周期不同。locaStorage 是永久性存储，而sessionStorage的生命周期与会话保持一致，会话结束时数据消失。从硬件方面理解，localStorage的数据是存储在硬盘中的，关闭浏览器时数据仍然在硬盘上，再次打开浏览器仍然可以获取。而sessionStorage的数据保存在浏览器的内存中，当浏览器关闭后，内存将被自动清除。 localStorage在使用中也有一些局限，具体如下。
检查浏览器对该API支持情况
<script>
if (window.sessionStorage) {
// 浏览器支持sessionStorage
} else if (window.localStorage) {
// 浏览器支持localStorage
}
</script>
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="username">
<button id="setData">设置数据</button>
<button id="getData">获取数据</button>
<button id="delData">删除数据</button>
<script>
var username = document.querySelector('#username');
// 单击“设置数据”按钮，设置数据
document.querySelector('#setData').onclick = function () {
var val = username.value; // 获取username里面的值
window.sessionStorage.setItem('username', val);
};
// 单击“获取数据”按钮，获取数据
document.querySelector('#getData').onclick = function () {
alert(window.sessionStorage.getItem('username'));
};
// 单击“删除数据”按钮，删除数据
document.querySelector('#delData').onclick = function () {
window.sessionStorage.removeItem('username');
};
if (window.sessionStorage) {
// 浏览器支持sessionStorage
} else if (window.localStorage) {
// 浏览器支持localStorage
}
</script>
</script>
</body>
</html>
上面的存储方式，仅仅在一个会话中有效。会话结束后，数据则会被清除
下面这个方式存储。只要不主动清除，长期有效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="username">
<button id="setData">设置数据</button>
<button id="getData">获取数据</button>
<button id="delData">删除数据</button>
<script>
var username = document.querySelector('#username');
// 单击“设置数据”按钮，设置数据
document.querySelector('#setData').onclick = function () {
var val = username.value; // 获取username里面的值
//window.sessionStorage.setItem('username', val);//一个会话，关闭网页后，数据不会保存
window.localStorage.setItem('username',val)//只要不主动清除，一直都在
};
// 单击“获取数据”按钮，获取数据
document.querySelector('#getData').onclick = function () {
// alert(window.sessionStorage.getItem('username'));
alert(window.localStorage.getItem('username'))
};
// 单击“删除数据”按钮，删除数据
document.querySelector('#delData').onclick = function () {
// window.sessionStorage.removeItem('username');
window.localStorage.removeItem('username')
};
if (window.sessionStorage) {
// 浏览器支持sessionStorage
} else if (window.localStorage) {
// 浏览器支持localStorage
}
</script>
</script>
</body>
</html>
