浅谈cookie,sessionStorage和localStorage区别

Posted 高辛戊

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浅谈cookie,sessionStorage和localStorage区别相关的知识,希望对你有一定的参考价值。

在客户端存储数据可以使用的技术有如下四种:

  1.   Cookie技术:浏览器兼容性好,但操作比较复杂,需要程序员自己封装,源生的Cookie接口不友好

  2.   H5 WebStorage:不能超过8MB,操作简单;

  3.   IndexedDB:可存大量数据,还不是标准技术;

  4.   Flash存储:依赖于Flash播放器,Adobe已宣布将放弃Flash,可以不再考虑此技术。

这里主要讨论cookie和WebStorage:

        共同之处:Cookie和WebStorage都是用来跟踪浏览器用户身份的会话方式。

        名词解释:Session:会话,浏览器从打开某个网站的一个页面开始,中间可能打开很多页面,直到关闭浏览器,整个过程称为“浏览器与Web服务器的一次会话。

         Cookie 是小甜饼的意思。顾名思义,cookie 确实非常小,它的大小限制为4KB左右,它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

        WebStorage技术中,浏览器为用户提供了两个对象:

        (1)window.sessionStorage:类数组对象,会话级数据存储;

        (2)window.localStorage:类数组对象,本地存储(跨会话级存储);

        sessionStorage,是在浏览器进程所分得的内存中存储着一次Web会话可用的数据,可供此次会话中所有的页面共同使用;浏览器一旦关闭就消失了。作用:在同一个会话中的所有页面间共享数据。

        localStorage是在浏览器所能管理的外存(硬盘)中存储着用户的浏览数据,可供此次会话以及后续的会话中的页面共同使用,即使浏览器关闭也不会消失,可以说在本地电脑永久存在,除非javascript脚步删除或者用户主动清空浏览器缓存。作用:在当前客户端所对应的所有会话中共享数据,如登录用户名。

        sessionStorage有如下方法,localStorage同样也可使用这些方法:

    sessionStorage[key] = value       //保存一个数据

    sessionStorage.setItem(key, value) //保存一个数据

    var v = sessionStorage[key]       //读取一个数据

    var v = sessionStorage.getItem(key) //读取一个数据

    sessionStorage.removeItem(key) //删除一个数据

    sessionStorage.clear()    //清除所有数据

    sessionStorage.length    //数据的数量

    sessionStorage.key(i)    //获取第i个key

        localStorage中若数据发生了修改,都会触发一次window.onstorage事件,可以监听此事件,实现监视localStorage数据改变的目的,用于在一个窗口中监视其它窗口中对localStorage数据的修改。但注意window.onstorage不能监视sessionStorage数据的修改!

应用场景

        有了对上面这些差别的直观理解,我们就可以讨论三者的应用场景了。

因为考虑到每个 HTTP 请求都会带着 Cookie 的信息,所以 Cookie 当然是能精简就精简啦,比较常用的一个应用场景就是判断用户是否登录。针对登录过的用户,服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码,下次只要读取这个值就可以判断当前用户是否登录啦。曾经还使用 Cookie 来保存用户在电商网站的购物车信息,如今有了 localStorage,似乎在这个方面也可以给 Cookie 放个假了。

        而另一方面 localStorage 接替了 Cookie 管理购物车的工作,同时也能胜任其他一些工作。比如html5游戏通常会产生一些本地数据,localStorage 也是非常适用的。如果遇到一些内容特别多的表单,为了优化用户体验,我们可能要把表单页面拆分成多个子页面,然后按步骤引导用户填写。这时候 sessionStorage 的作用就发挥出来了。

安全性的考虑

        需要注意的是,不是什么数据都适合放在 Cookie、localStorage 和 sessionStorage 中的。使用它们的时候,需要时刻注意是否有代码存在 XSS 注入的风险。因为只要打开控制台,你就随意修改它们的值,也就是说如果你的网站中有 XSS 的风险,它们就能对你的 localStorage 肆意妄为。所以千万不要用它们存储你系统中的敏感数据。

 

参考资料:

<<JavaScript高级程序设计>>

详说 Cookie, LocalStorage 与 SessionStorage(https://segmentfault.com/a/1190000002723469)

以上是关于浅谈cookie,sessionStorage和localStorage区别的主要内容,如果未能解决你的问题,请参考以下文章

浅谈session,cookie,sessionStorage,localStorage的区别及应用场景

浅谈session,cookie,sessionStorage,localStorage的区别及应用场景

[转] 浅谈session,cookie,sessionStorage,localStorage的区别及应用场景

浅谈浏览器存储(cookielocalStoragesessionStorage)

cookie和sessionStorage localStorage 对比

cookies,sessionStorage 和 localStorage 的区别?