一、区别

相信很多人都见过这两个关于HTML5的新名词！

HTML5种的web storage包含两种存储方式：localStorage和sessionStorage，这两种方式存储的数据不会自动发给服务器，仅仅是本地保存，有大小限制。

localStorage是持久化的本地保存，除非主动删除，不然会一直存在，而且在所有的同源窗口中都是可以共享的；

sessionStorage是会话级别的本地保存，比如一个页面关闭的时候该页面设置的sessionStorage数据会自动消失，在不同浏览器窗口不会共享的，即使是同一个浏览器的同一个页面。

两者拥有一些共同的方法：

window.localStorage.setItem(key,value);//设置指定key的数据（JSON格式）window.localStorage.getItem(key);//获取指定key的数据window.localStorage.removeItem(key);//删除指定key的数据window.localStorage.clear();//清空所有的存储数据window.sessionStorage.setItem(key,value);window.sessionStorage.getItem(key);window.sessionStorage.removeItem(key);window.sessionStorage.clear();

二、如何测试

1、最简单的打开浏览器在console里直接输入测试(localStorage)

在你没有执行removeItem和clear()之前浏览器的resources下是能够清楚的看到你所设置的值！即使你关闭该页面重新打开还是可以看到的。

2、更好点的测试，简单封装(sessionStorage)

var KEY='todo';var Store={    save:function(items){        return window.sessionStorage.setItem(KEY,JSON.stringify(items));    },    fetch:function(){        return JSON.parse(window.sessionStorage.getItem(KEY)||'[]');    }}var s={'name':'九成'};Store.save(s);var x=Store.fetch();console.log(x);//输出：Object {name: "九成"}

当你关闭该测试页面数据自动消失。

3、es6的

let NewKey='youType';let object={    save(items){        return window.sessionStorage.setItem(KEY,JSON.stringify(items));    },    fetch(){        return JSON.parse(window.sessionStorage.getItem(KEY)||'[]');    }};object.save({
    'name':'JACK'});let you=object.fetch();console.log(you.name);//JACK

如果你更多见解请留下脚印.....