webStorage 和cookie的区别

共同点：

        都是保存在浏览器端,且同源的

 

cookie有什么缺点？

详细请看 cookie的弊端

Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB

安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。

 

区别：

        

        1、cookie数据始终在同源的http请求中携带(即使不需要)，即cookie在浏览器和服务器间来回传递

        2、cookie数据还有路径（path）的概念，可以限制。cookie只属于某个路径下、

        3、存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数           据，如回话标识。

        4、webStorage虽然也有存储大小的限制，但是比cookie大得多，可以达到5M或更大

        5、数据的有效期不同

                        sessionStorage：仅在当前的浏览器窗口关闭有效；

                        localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；

                        cookie：只在设置的cookie过期时间之前一直有效，即使窗口和浏览器关闭

 

        6、作用域不同

                        sessionStorage：不在不同的浏览器窗口中共享，即使是同一个页面；

                        localStorage：在所有同源窗口都是共享的；

                        cookie：也是在所有同源窗口中共享的

        7、webStorage支持事件通知机制，可以将数据更新的通知发生给监听者

        8、webStorage的API借口使用更方便 。setItem  getItem clearItem

        window。sessionStorage/window。 localStorage

        setItem（key,val）设置

        getItem（key）获取

        webStorage。removeItem（key）删除单个

        webStorage.clear（）清除所有

        webStorage只能操作字符串对象，所有的存储值都会为字符串数据

 

                     补充：什么是同源策略？

              同源策略，它是由Netscape提出的一个著名的安全策略。

               现在所有支持JavaScript 的浏览器都会使用这个策略。

               所谓同源是指，域名，协议，端口相同。

               当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面

               当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，

               即检查是否同源，只有和百度同源的脚本才会被执行。 [1] 

               如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。