sessionStorage与localStorage的区别

sessionStorage与localStorage是Web Storage第二版定义的两个对象，Web Storage提供了cookie之外的存储会话数据的途径，它的目的是解决通过客户端存储不需要频繁发送回服务器的数据时使用cookie的问题。Storage类型用于保存名/值对数据，直到存储空间上限(由浏览器决定)。sessionStorage和localStorage是Storage的实例，它们增加了以下方法，进行增删改查操作。

clear() //删除所有值
getItem(name) //取得给定name的值
key(index) //取得给定数值位置的名称
removeItem(name) //删除给定name的名值对
setItem(name, value) //设置给定name的值

sessionStorage对象

sessionStorage对象只存储会话数据，这意味着数据只会存储到浏览器关闭，存储在sessionStorage中的数据不受页面刷新的影响，可以在浏览器奔溃并重启后恢复。(IE浏览器不支持)
sessionStorage的存储采用同步阻塞的方式，因此数据会被立即提交到存
以下是操作sessionStorage的方法

sessionStorage可以通过setItem()方法或者直接给属性赋值给它添加数据:

//使用方法存储数据
sessionStorage.setItem("name", "apk无");
//使用对象存储数据
sessionStorage.school = "zju";

对于存储在sessionStorage中的数据，可以用getItem(),或者直接访问属性名来取得:

//使用方法取得数据
let name = sessionStorage.getItem("name");
//使用对象取得数据
let school = sessionStorage.school;

通过key()先取得给定位置中的数据名称，然后使用该名称通过getItem()取得值，可以遍历sessionStorage中的名/值对

for (let i = 0; i < sessionStorage.length; i++) {
    let key = sessionStorage.key(i);
    let value = sessionStorage.getItem(key);
    console.log(key + "=" + value);
}

也可以使用for-in 循环迭代sessionStorage的值

for (let key in sessionStorage) {
     let value = sessionStorage.getItem(key);
     console.log(key + "=" + value);
}

要从sessionStorage中删除数据，可以使用delete操作符直接删除对象属性，也可以使用removeItem()方法，下面是两个例子

//使用removeItem()删除值
sessionStorage.removeItem("name");
//使用delete删除值
delete sessionStorage.school;

localStorage对象

在html5规范中，localStorage对象取代了globalStorage，作为客户端持久存储数据的机制，要访问同一个localStorage对象，页面必须来自同一个域，在相同的端口上使用相同的协议。
存储localStorage中的数据会保留到通过JavaScript删除或者用户清楚浏览器缓存。localStorage数据不受页面刷新影响，也不会因关闭浏览器、标签页或重启浏览器而丢失。
因为localStorage是Storage的实例，所以可以像使用sessionStorage一样使用localStorage。比如下面几个例子:

//使用方法存储数据
localStorage.setItem("name", "apk无");
//使用对象存储数据
localStorage.school = "zju";

//使用方法取得数据
let name = localStorage.getItem("name");
//使用对象取得数据
let school = localStorage.school;