前几天面试遇到了一个题是问localStorage和sessionStorage的区别，当时的回答不是很全面，今天就针对这个问题做一下整理（概念，用法，区别）
HTML5 Web存储，一个比 cookie 更好的本地存储方式，什么是 HTML Web存储？
定义：使用HTML5 可以在本地存储用户的浏览数据。早些时候，本地存储使用的是 cookie，但是Web存储需要加载更加的安全与快速，这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站，它也可以存储大量的数据，而不影响网站的性能。（数据以键/值对存在，web网页的数据只允许该网页访问使用）
localStorage（本地存储）
localStorage 对象存储的数据没有时间限制，用于长久保存整个网站的数据
常用API（localStorage相当于window下面的一个属性，故可以使用 . 方法和 [] 方法）
- 保存数据
localStorage.name = 'zhangsan'
// 或者
localStorage.['name'] = 'zhangsan'
// 或者
localStorage.getIten('name','zhangsan') - 读取数据
// 自身方法
localStorage.getItem("name");
// []方法
localStorage["name"];
// .方法
localStorage.name; - 删除单个数据（使用delete关键字）
// 自身方法
localStorage.removeItem("name");
// []方法
delete localStorage["name"];
// .方法
delete localStorage.name - 删除所有数据
localStorage.clear()
- 得到某个索引的值
1 // 通过自身的key
2 for (var i=0;i<localStorage.length;i++) {
3 console.log(localStorage.key(i));
4 }
5
6 // 通过for in 循环获取
7 for(var key in localStorage){
8 console.log(key);
9 } - 获取所有值
localStorage.valueOf();取出所有的值
- 判断是否具有某个key
localStorage.hasOwnProperty("name")
// 如果存在的话返回true，不存在返回false
注：1.localStorage特定于页面的协议，不在同一域名下不能访问
2.数据有大小限制，5M左右，不同浏览器大小会有不同
3.生命周期是永久的，但是数据实际是存在浏览器的文件夹下的，卸载浏览器数据可能就会删除
4.浏览器可以设置是否可以访问数据，如果设置不允许则会访问失败
5.兼容IE8以上浏览器
6.默认情况下是以字符串形式存储的，可以根据个人需要进行数据类型转换
sessionStorage（会话存储）
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除
常用API（同上，和localStorage类似）
注意事项也和localStorage类似，唯一不同的就是数据存储周期不一样