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就可以查看到值。