h5-sessionStorage儲存的使用

 1 <!--
 2 sessionStorage的使用：存儲數據到本地。存儲的容量5mb左右
 3     1.這個數據本質是儲存在當前頁面的內存中
 4     2.他的生命週期爲關閉當前頁面，關閉頁面，數據會自動清楚
 5 
 6 setTtem(key,value):存儲數據，以鍵值對的方式儲存
 7 getItem(key):獲取數據，經過制定名稱的key獲取對應的value值
 8 removeItme(key):刪除數據，經過制定名稱key刪除對應的值
 9 clear():清空全部存儲的內容
10 -->
11 <input type="text" id="username"><br/>
12 <input type="button" value="設置數據" id="setData"><br/>
13 <input type="button" value="獲取數據" id="getData"><br/>
14 <input type="button" value="刪除數據" id="removeData"><br/>
15 
16 <script>
17     /*存儲數據*/
18     document.querySelector("#setData").onclick=function () {
19         var name = document.querySelector("#username").value;
20         window.sessionStorage.setItem("userName",name);
21     }
22     /*獲取數據*/
23     document.querySelector("#getData").onclick=function () {
24         /*若是找不到對應名稱的key，那麼就會獲取null*/
25         var name=window.sessionStorage.getItem("userName");
26         alert(name);
27     }
28     /*刪除數據*/
29     document.querySelector("#removeData").onclick=function () {
30         /*在刪除的時候若是key值錯誤，不會報錯，也不會刪除數據*/
31         window.sessionStorage.removeItem("userName");
32     }
33 </script>