H5本地存储

H4中使用的cookie把用户信息保存在客户端浏览器，但是它受到很多限制。

• 大小：最多能存储4k
• 带宽：它是随着http请求一起发送到服务器的，因此浪费一部分的带宽
• 复杂度：操作复杂

H5新增加了一种在客户端本地存储数据的方法 webStorange,分两种形式sessionStorage和localStorage。

• 使用键值对的方式进行存取数据，存取的数据只能是字符串。

• 存储大小不超过5M

   sessionStorage(会话存储)：将数据保存在session对象中。所谓session，是指用户在浏览
   某个网站时，从进入网站到浏览器关闭所经过的这段时间，session对象可用来保存在这段时
   间内所要求保存的任何数据
   
   localStorage(本地存储)：将数据保存在客户端本地的硬件设备中，即使浏览器关闭了，该数
   仍然存在，下次打开浏览器访问网站时仍然可用
   	缺点：高版本支持 ie8以上支持（以下用userData）
   	不能被爬虫获取
   	浏览器隐私模式下是不可取的
   	存储内容过多会使页面变卡
  

sessionStorage
// 存数据的两种方法
//	1.通过属性	sessionStronge["key"]="value";
//	2.通过setItem()方法  sessionStorage.setItem(key, value)
// 取数据的两种方法
//	1.sessionStronge["key"]
//	2.通过getItem()方法  sessionStronge.getItem()
// 删除数据
// 1.删除指定数据		sessionStorage.removeItem(key)
// 2.删除全部数据		sessionStorage.clear()

localStorage
// 存数据的两种方法
//	1.通过属性	localStronge["key"]="value";
//	2.通过setItem()方法  localStorage.setItem(key, value)
// 取数据的两种方法
//	1.localStronge["key"]
//	2.通过getItem()方法  localStronge.getItem()
// 删除数据
// 1.删除指定数据		localStorage.removeItem(key)
// 2.删除全部数据		localonStorage.clear()

面试常见问题

sessionStorage与localStorage与cookies的区别？

sessionStorage：只能在浏览器被关闭之前使用，只存在浏览器中，关闭浏览器之后数据就会消失
localStorage：可以长期存储数据，数据一直存在，除非清除本地缓存localStorage
cookies：浪费宽带，存储空间小，操作复杂