HTMl5的sessionStorage和localStorag
-
html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。
-
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
-
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
-
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
-
Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。
-
Web Storage仅仅是为了在本地“存储”数据而生
-
localStorage与SessionStorge有相同时方法，区别在于localStorge属于永久性存储，SessionStorge属于会话存储。
常用操作：
sessionStorage.getItem(key):获取指定key本地存储的值
sessionStorage.setItem(key,value)：将value存储到key字段
sessionStorage.removeItem(key):删除指定key本地存储的值
sessionStorage.length是sessionStorage的项目数
参考文献：HTMl5的sessionStorage和localStorage
用例1：
1.在进入对应功能页时发起ajax请求获取json数据；
2.在该功能页或其子页面使用Sessionstorge中数据。
用例2：
查看本地SessionStorage中是否有所需字段，没有则ajax请求获取，有就从SessionStorage中取。
Paste_Image.png
注意：该种方式下，注意其他页面更改缓存后要清除缓存，从而到服务器获取新的数据
Paste_Image.png
对比与总结：
SessionStorge便于在客户端存储常用的数据，避免反复向服务器请求数据。用例1只在每次进入功能页时请求一次，然后就可以使用SessionStorge中的数据，简便、易实现。用例2只有首次进入功能页以及涉及的SessionStorge字段被更改时请求，请求数量少、访问速度快、用户体验佳。
