2KB项目,专业的源码交易网站 帮助 收藏 每日签到

HTML5 Web Storage -- 让Cookies看起来如此古老

  • 时间:2019-01-23 18:43 编辑:2KB 来源:2KB.COM 阅读:382
  • 扫一扫,手机访问
  • 分享
摘要: 英文原文:HTM
英文原文:HTML5 Web Storage – Cookies Are So 1994!

在此两部分组成的系列中,我们将来看看HTML5 规范中最棒而且最有趣的特性之一的Web Storage。我们将看看Web Storage 和 Cookies的历史,并从考虑以下几点:

*Cookies 怎么样又为何被使用

*Web Storage 的长处与限制

*当前浏览器对Web Storage 与 Cookies的支持度

*未来在web app中管理事务状态

*如何利用Web Storage构建离线app

由于该系列是需要动手实践的,我们将一起通过简单的程序来利用Web Storage。我们将利用它创建在线或离线都可用的应用,这样你就可以在四处使用它了。

Cookies 历史简短介绍

Mosaic Netscape Browser

Cookies 于1994年作为 Mosaic Netscape 浏览器beta 0.9 版的一部分被引入,Netscape的客户MCI想要找到一种方式来保持状态,但不是在服务器端。Cookies作为技术解决手段被选中了。

Cookies在形式和结构上都很简单,是一种有效的解决手段,它允许在用户计算机上存储小段文本信息。这些存储的信息能够使得网站提供更加个性化的体验,例如:

*保持登录

*保持上次查看的页面

*浏览计数

*广告追踪

*购物车的状态保持

Cookies是如何起效的?

当浏览器从web的回应到页面请求中接收到一个 Set-Cookie 头部时Cookies便创建了:

1 HTTP/1.1 200 OK
2 Content-type: text/html
3 Set-Cookie: page_loaded=25; Expires=Wed, 09 Jun 2021 10:18:14 GMT

浏览器接收到表明回应成功的 HTTP 200 代码,以及回应的内容类型。同事也接收到了 Set-Cookie头部,并创建了一个一下结构的cookie:

Set-Cookie header

除非在Wed, 09 Jun 2021 10:18:14前刷新,否则cookie将在这以后无效并被浏览器移除。如果它没有被终止,在将来所有的该网站的请求中都将携带类似的信息头部:

1 GET /spec.html HTTP/1.1
2 Host: www.example.org
3 Cookie: page_loaded=25;

在设置cookie的时候有很多的选项可以指定。这些包括域名、路径和是否安全或者HttpOnly。

Cookies趋势下滑

先不管那些很明显的优势和简洁性,cookie一直在潜在隐私和安全影响方面有一个坏名声。他们很容易受到安全问题攻击影响,例如关键攻击载体的CSRF(Cross Site Request Forgery),XSS(Cross Site Scripting Attacks) 以及 Session Hijacking 。一个用功且专业的开发者也许不会把很多安全细节信息放在cookie中,或者实现一系列的方法来减轻可能的这些形式的攻击。

Cookies 不应该被看做是种自动的威胁。没有它们,很多我们期待的web个性化都将变得不可能。

HTML5 存储简介

HTML5引入了Web Storage作为Cookies的替代,这种存储有两种类型:local 和 session:

Local and Session

你可以根据你程序的重点选择最适合你目标的存储方式。正如cookies一样,HTML5存储有自己的优势以及缺陷。

Web Storage 的缺陷

*数据以简单字符串存储;操作所需的存储不同类型的对象,例如booleans,objects,ints和floats。

*默认5MB存储限制;如果需要时可有用户允许获取更多存储。

*可被用户或者系统管理员禁用

*复杂数据集合存储可能很慢

Web Storage 的长处

*App 可以再在线或离线情况下使用

*拥有简单好用易学的API

*能够对浏览器使用事件钩子,例如offline,online,storage change

*比cookies更便于管理,没有额外的的请求头部数据

*提供更大的空间以存贮日益剧增的复杂数据

Web Storage API

Web Storage API 简单易学,它只包含四个方法:

Web Storage API Methods

 这些方法为我们提供了所有使用本地存储所需要的。正如编码中的所有东西一样,我们可以创建类和对象或者使用第三方的库来是的交互更加精致。

要使得使用Web Storage很简单,你可以使用第三方库之一例如ModernizrjStorage

浏览器事件

HTML5 暴露了很多开发者可以使用的很多事件,在此文中,我们将看到 offline 和 online。

安全性

HTML5 可能很闪耀并且是崭新的,但是这不意味着比以前更加的安全。记住需要为Cookies做的那些安全考虑。在重要的是,不要将敏感信息存放在Web Storage里!我知道这无需多言,但是值得重复提醒。

正如Cookies一样,用户可以查看这些信息并将其删除,而且这些信息仍然是跨站脚本攻击的目标。所以使用它是要多费点心思。

Web Storage的一个关键的改进就是提供local 和 session的区别存储。Session 存储当窗口关闭或者标签关闭时将会移除所有存储信息。Local 存储将在标签间以及窗口绘画保持信息。通过在标签或者窗口关闭而将数据的自动移除的方式,我们能够获得一个更加安全的存储环境,我强调一下,是更安全,而 不是安全。

在使用时使其更加简单能够获得附加的好处,如果我们清楚我们只需要短时间的存储,那么我们可以将其放在交互式时也许会被自动清理的部分。但是不要因此养成懒惰草率的编码习惯。

本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。 2KB翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。


2KB项目(www.2kb.com,源码交易平台),提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务

  • 全部评论(0)
资讯详情页最新发布上方横幅
最新发布的资讯信息
【计算机/互联网|】Nginx出现502错误(2020-01-20 21:02)
【计算机/互联网|】网站运营全智能软手V0.1版发布(2020-01-20 12:16)
【计算机/互联网|】淘宝这是怎么了?(2020-01-19 19:15)
【行业动态|】谷歌关闭小米智能摄像头,因为窃听器显示了陌生人家中的照片(2020-01-15 09:42)
【行业动态|】据报道谷歌新闻终止了数字杂志,退还主动订阅(2020-01-15 09:39)
【行业动态|】康佳将OLED电视带到美国与LG和索尼竞争(2020-01-15 09:38)
【行业动态|】2020年最佳AV接收机(2020-01-15 09:35)
【行业动态|】2020年最佳流媒体设备:Roku,Apple TV,Firebar,Chromecast等(2020-01-15 09:31)
【行业动态|】CES 2020预览:更多的流媒体服务和订阅即将到来(2020-01-08 21:41)
【行业动态|】从埃隆·马斯克到杰夫·贝佐斯,这30位人物定义了2010年代(2020-01-01 15:14)
联系我们

Q Q: 7090832

电话:400-0011-990

邮箱:7090832@qq.com

时间:9:00-23:00

联系客服
商家入住 服务咨询 投拆建议 联系客服
0577-67068160
手机版

扫一扫进手机版
返回顶部