面试之HTML5 Web存储

　　前几天面试遇到了一个题是问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')

• 读取数据

  1 // 自身方法
  2 localStorage.getItem("name");
  3 // []方法
  4 localStorage["name"];
  5 // .方法
  6 localStorage.name;

• 删除单个数据（使用delete关键字）

  1 // 自身方法
  2 localStorage.removeItem("name");
  3 // []方法
  4 delete localStorage["name"];
  5 // .方法
  6 delete localStorage.name

• 删除全部数据

  1 localStorage.clear()
  

• 获得某个索引的值

  1 1 // 经过自身的key
  2 2 for (var i=0;i<localStorage.length;i++) {
  3 3     console.log(localStorage.key(i));
  4 4 }
  5 5 
  6 6 // 经过for in 循环获取
  7 7 for(var key in localStorage){
  8 8     console.log(key);
  9 9 }

• 获取全部值

  1 localStorage.valueOf();取出全部的值

• 判断是否具备某个key

  1 localStorage.hasOwnProperty("name")
  2 // 若是存在的话返回true，不存在返回false

注：1.localStorage特定于页面的协议，不在同一域名下不能访问

　　2.数据有大小限制，5M左右，不一样浏览器大小会有不一样

　　3.生命周期是永久的，可是数据实际是存在浏览器的文件夹下的，卸载浏览器数据可能就会删除

　　4.浏览器能够设置是否能够访问数据，若是设置不容许则会访问失败

　　5.兼容IE8以上浏览器

　　6.默认状况下是以字符串形式存储的，能够根据我的须要进行数据类型转换

 

sessionStorage（会话存储）

　　sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除

经常使用API（同上，和localStorage相似）

注意事项也和localStorage相似，惟一不一样的就是数据存储周期不同