资讯专栏INFORMATION COLUMN

详解Cookie,localStorage与seesionStorage

Rango / 3331人阅读

摘要:缺点数量和长度受限制,数量部分不同的浏览器不一样,长度是不能超过,否则会被截掉。更容易受到安全攻击。不会在每个请求中被携带。遵循同源政策,保存数据会相对来说安全些。的优缺点基本上和是相同的,同属于,返回的也都是一个对象。

前言

这些api的发展历程?

这些api各自的优缺点是什么?

这些api的使用场景?

怎么用就不说了,因为直接看文档就可以了

参考了很多篇文章,现在把所看的内容总结一下。

发展历程

长久以来,本地存储能力一直是桌面应用区别于Web应用的一个主要优势。对于桌面应用,操作系统一般都提供了一个抽象层来帮助应用程序保存其本地数据。但遗憾的是,由于一些原因,在web的发展史上,在很长的一段时间里Cookie是唯一可以使用的在用户本地存储少量的数据的方法。一直随着现代浏览器开始支持各种各样的存储方式,Cookie的部分功能才渐渐被取代。

Cookie的优缺点

优点:

可以方便的控制Cookie生命周期。

持久性数据(Persistent data)。

可以设置作用域。

缺点:

Cookie数量和长度受限制,数量部分不同的浏览器不一样,长度是不能超过4KB,否则会被截掉。

浏览器的每次请求都会携带Cookie数据,会带来额外的性能开销,浪费带宽(尤其是在移动开发环境下)。

Cookie是以单字符串的形式保存在客户端的,所以利用原生js不利于操作。

Cookie更容易受到安全攻击。

localStorage的优缺点

优点:

以键值对的形式进行存储,存储的是原始值,浏览器提供了更易操作的api。

更大的存储空间,相同域最多可以存储5MB。

不会在每个HTTP请求中被携带。

遵循同源政策,保存数据会相对来说安全些。

缺点:

不能直接控制生命周期,需要自己利用js进行封装之后才能操作。

如果服务端需要客户端的存储信息,你需要手动添加它。

sessionStorage的优缺点

sessionStorage基本上和localStorage是相同的,同属于Web Storage,返回的也都是一个Storage对象。区别在于sessionStorage在关闭浏览器或者是当前标签页(有的人说关闭tab不清空,但是规范上有写,sessionStorage 是基于browsing context来呈现的)时,存储的数据都会被清空掉。

应用场景

Cookie因为它的实现特点,所以更多的是保存让服务端可以获得的数据,保存用户的个人的用户信息,让服务端知道当前用户是谁,如保存sessionId。而localStorage则是用来服务客户端的,可以保存主题设置,用户配置的一些信息。sessionStorage更多的是像对localStorage的一个补充,可以用来保存页面的会话信息。

参考文章

深入HTML5: HTML5 本地存储( Local Storage )的前世今生 (一)

HTTP cookies

Cookie的工作原理与优缺点

Local Storage vs Cookies

What is the difference between sessionstorage, localstorage and Cookies?

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/107772.html

相关文章

  • 前端开发常见笔试/面试题总结 -- HTML / CSS篇

    摘要:室友同为前端开发,最近在他找工作的时候,讨论到了常见的前端笔试题和面试题,今天就来总结一下之前校招和社招时频繁遇到的面试题。合并后的外边距的高度取外边距高度中的较大者。 室友同为前端开发,最近在他找工作的时候,讨论到了常见的前端笔试题和面试题,今天就来总结一下之前校招和社招时频繁遇到的面试题。 iframe 有哪些缺点? 页面看起来较杂乱,不易管理,布局不佳,易分散用户注意力 搜索引...

    dongxiawu 评论0 收藏0
  • 前端开发常见笔试/面试题总结 -- HTML / CSS篇

    摘要:室友同为前端开发,最近在他找工作的时候,讨论到了常见的前端笔试题和面试题,今天就来总结一下之前校招和社招时频繁遇到的面试题。合并后的外边距的高度取外边距高度中的较大者。 室友同为前端开发,最近在他找工作的时候,讨论到了常见的前端笔试题和面试题,今天就来总结一下之前校招和社招时频繁遇到的面试题。 iframe 有哪些缺点? 页面看起来较杂乱,不易管理,布局不佳,易分散用户注意力 搜索引...

    endiat 评论0 收藏0
  • 数据存储

    摘要:数据并非存储在一个安全环境中,其中包含的任何数据都可以被他人访问。的两个主要目标是提供一种在之外存储会话数据的途径提供一种存储大量可以跨会话存在的数据的机制。 随着Web应用程序的出现,产生了对于能够直接在客户端上存储用户信息能力的要求。比如登录信息、偏好设定或其他数据,这个问题的第一个方案是以cookie的形式出现的,今天cookie只是在客户端存储数据的其中一种选项。 cookie...

    frolc 评论0 收藏0
  • 前端面试题-浏览器/服务端/网络

    摘要:同源策略是什么跨域通信同源两个文档同源需满足协议相同域名相同端口相同跨域通信进行操作通信时如果目标与当前窗口不满足同源条件,浏览器为了安全会阻止跨域操作。 同源策略是什么? javascript跨域通信 同源:两个文档同源需满足 协议相同 域名相同 端口相同 跨域通信:js进行DOM操作、通信时如果目标与当前窗口不满足同源条件,浏览器为了安全会阻止跨域操作。跨域通信通常有以下方法 ...

    jsdt 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<