web storage下的session storage和local storage

session storage 和 local Storage 

  區別一：
  session storage只存在於本頁面 ,而且不同的頁面都有其自己的session ,關閉瀏覽器就不存在了,但是同源作用域下面可以取到值。(取到值的前提是指你頁面的取值方式是通過超鏈接或者腳本新打開的頁面)

  列舉一個怎麼取到值和取不到值的案例：

  a.html

 <script>
      sessionStorage['test']="aa";
      console.log(sessionStorage.getItem('test'));
      function setItem(){
          sessionStorage.setItem('first','haha');
      }
    </script>
    <input type="button"  value="setItem"  οnclick="setItem()"/>

  b.html

 <script>
       console.log( sessionStorage.getItem('test'));
       function getItem(){
           console.log(sessionStorage.getItem('first'));
       }
    </script>
    <input type="button" value="GetItem" οnclick="getItem()"/>

這樣，你運行b頁面是取不到a頁面的值的；

然後我們在a頁面新增一行代碼：

   function setItem(){
          sessionStorage.setItem('first','haha');
          location.href='b.html';
      }

這樣子，b頁面也取到了a頁面存進去的值；

取到值，但是你打開b頁面的控制檯卻是查看不到值的；

  所以：session storage比較適用於對話框和嚮導 ,可以傳遞數據又不會泄露信息
  local storage存在於任何頁面，同瀏覽器同域的任何文件   關閉瀏覽器一直存在，除非手動清除
  同域指的localStorage存數的數據是不能跨瀏覽器共用的，不同瀏覽器也只能讀取各自瀏覽器的數據。

  區別二：

  session storage和local storage  本質的區別就是：他們的作用域都是針對同瀏覽器，並且都可以跨頁面傳值，只是session storage 不能查看值且關閉瀏覽器就不在了。local storage不僅可以跨頁面傳值，還可以相互查看

  下面通過具體的案例來說明：

  首先分別介紹兩者的用法：

  這是我在一個one.html 頁面編寫的代碼

     

session storage的用法就是sessionstorage.xx（xx表示需要使用什麼方法就寫什麼，前提是sessionstorage裏面得有這個方法)

上面那段代碼就是：勾選複選框，將勾選結果存入sessionstorage中  如果checked爲true就跳轉至一個頁面  否則跳轉至其他頁面。

下面來介紹lacal session的用法：

用法和session storage差不多  需要什麼方法就localstorage.方法名。

兩者的區別就是：

  one.html下有這段代碼

 

 two.html下有這段代碼

   

不管是採用session 還是local的方式two.html頁面的getItem()方法都能取到one.html頁面設置的myFirstly值。當然只是指同瀏覽器情況下，比如你chrome打開的就不能取到firefox的數據。(session取到值這裏指的是你頁面的取值方式是通過超鏈接或者腳本新打開的頁面）

但是session 和local還是有區別的。

 session在瀏覽器關閉前都有效，關閉瀏覽器就沒了。

 Local不管關不關瀏覽器都永久保存，除非手動清除。

還有一點如果one.html用的是sessionstorage存儲，那麼在two.html只可以取到值，而用開發者模式查看session storage是看不到的。

 localstorage就可以查看到值。