这是我参与8月更文挑战的第19天，活动详情查看：8月更文挑战
Web Storage
一、认识Web Storage
- Web Storage的目的是解决通过客户端存储不需要频繁发送回服务器的数据时使用的问题；
- 提供在cookie之外的存储会话数据的途径、跨会话持久化存储大量数据的机制；
Web Storage定义了两个对象：localStorage和sessionStorage。localStroage是永久存储机制，sessionStorage是跨会话的存储机制。这两种浏览器存储API提供了在浏览中不受页面刷新影响而存储数据的两种方式；
二、Storage类型
Storage类型用于保存名/值对数据，直至存储空间上限(由浏览器决定)。Storage的实例与其它对象一样，但增加了一下的方法；
clear()：删除所有值，不在Firefox实现getItem(name)：取得给定name的值key(index)：取得给定数值位置的名称removeItem(name)：删除给定name的名/值对setItem(name, value)：设置给定name的值
getItem()、removeItem()和setItem()方法可以直接或间接通过Storage对象调用。因为每个数据项都作为属性存储在该对象上，所以可以使用点或方括号操作符访问这些属性，注意不要重写了某个已存在的对象成员。通过同样的操作来设置值，也可以使用delete操作符删除属性。
- Storage类型只能存储字符串。非字符串数据在存储之前会自动转换为字符串。这些转换不能在获取数据实际撤销。
- 通过length属性可以确定Storage对象中保存了多少名/值对。
三、sessionStorage对象
sessionStorage对象只存储会话数据，数据只会存储到浏览器关闭。- 存储在
sessionStorage中的数据不受页面刷新影响，可以在浏览器崩溃并重启后回复。 - 与服务器会话紧密相关，因此在服务器才能使用，本地文件不行。
- 对象中的数据只能由最初存储数据的页面使用，多页不行。
操作方法
-
通过
setItem()方法或直接给属性赋值添加数据。sessionStorage.setItem('name', 'mannqo'); sessionStorage.name = 'mannqo'; -
使用
getItem()或直接访问属性名来获取数据let name = sessionStorage.getItem('name'); let name = sessionStorage.name; -
使用
removeItem()方法或delete操作符删除对象属性delete sessionStorage.name; sessionStorage.removeItem('book'); -
遍历所有
sessionStorage的名/值对for (let key in sessionStorage) { let value = sessionStorage.getItem(key); console.log(`${key}=${value}`) }
所有现代浏览器在实现存储写入时都使用了同步阻塞方式，因此数据会被立即提交到存储，通过Web Storage写入的任何数据都可以立即被读取。sessionStorage对象应该主要用于存储只在会话期间有效的小块数据。如果需要跨会话持久存储数据的话，可以使用localStorage。
四、localStorage对象
要访问一个localStorage对象，页面必须来自同一个域(子域不可以)、在相同的端口上使用相同的协议。
-
使用方法或属性存储数据
localStorage.setItem('name', 'mannqo'); localStorage.name = 'mannqo'; -
使用方法或属性取得数据
let name = localStorage.getItem('name'); let name = localStorage.name;
五、localStorage和sessionStorage的区别
存储在localStorage中的数据会保留到通过JavaScript删除或者用户清除浏览器缓存。localStorage数据不受页面刷新影响，也不会因关闭窗口、标签页或重新启动浏览器而丢失。
