留言板

今天学到了和cookie相似的两个高科技技术。localStorage 和 sessionStorage

存储大小

web Storage 是HTML 5引入的一个重要的功能，在前端开发的过程中会经常用到，它可以在客户端本地存储数据，类似cookie，但其功能却比cookie强大的多。cookie的大小只有4Kb左右（浏览器不同，大小也不同），而web Storage的大小有5M
也就是说Storage比cookie的存储空间大，能放的东西比较多，我们一般用Storage一般用作用户名登陆等。

生命周期

localStorage

    localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性，可以查看其有多少条记录的数据。使用方法如下：

   示例
   var storage = null;  
   if(window.localStorage){              //判断浏览器是否支持localStorage  
   storage = window.localStorage;       
   storage.setItem("name", "Rick");    //调用setItem方法，存储数据  
   alert(storage.getItem("name"));     //调用getItem方法，弹框显示 name 为 Rick  
   storage.removeItem("name");     //调用removeItem方法，移除数据  
   alert(storage.getItem("name"));   //调用getItem方法，弹框显示 name 为 null  
}  

localStorage 相对sessionStorage简单一点，需要注意的地方不是很多。

sessionStorage

   sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致的。需要注意的有以下几点：

     <1> 页面刷新不会消除数据

        为了验证，我准备了两个html文件，一个是index.html，另一个是text.html。至于text.html后面在详细说其起的左右。二者的html

        1、  index.html

        2、  text.html

      当点击show按钮后，输入框内显示 “ your name is null“，此时sessionStorage中没有存储键值为 ”name“的数据。当在文本中输入”Rick“后，点击login按钮，输入框清空的时候数据已经存储到sessionStorage中，然后再去点击show按钮，会显示”your name is Rick“。此时，点击浏览器刷新网页，再点击show按钮，输入框中显示的依旧为”your name is Rick“


    <2>只有在当前页面打开的链接，才可以访sessionStorage的数据；

          这个同时，我们可以从index.html页面直接跳转到text.html页面

          通过index.html页面中的点击打开链接，可以看到  这个名字是可以到的

          因此，可以得知，在当前页面打开的链接，是可以访问到sessionStorage内的数据。后来又经过其他一些测试，发现当从index.html打开text.html页面后，关闭index.html，刷新text.html还可以访问到sessionStorage中的数据。只有当全部关闭index.html和从其内部打开的所有页面 或者直接关闭浏览器，才可以消除sessionStorage中的数据。 

    <3>使用window.open打开页面和改变localtion.href方式都可以获取到sessionStorage内部的数据

   上述两种方式，经过测试，事实确实如此。感兴趣的同学，可以真实的测试下结果。关于localStorage和sessionStorage的不同之处，就不再做总结了。   


   <4>  回顾cookie
        我们以前有学到过cookie  可以进行对比   cookie最多能存储4097个字节  也就是4K  但是我们的本地存储可以存储5M的字节，这样大大的增加了储存量，提高了本地存储数据的数量 
        document.cookie="属性名="+属性值 （这里属性值动态获取）

总结来说就是sessionStorage只要浏览器不关闭就一直存在，localStorage只要不卸载浏览器就一直存在。