专栏首页经年隔世HTML里的数据存储分析

HTML里的数据存储分析

在前端开发工作中,常用的数据存储有三种,分别是cookie,localStorage和sessionStorage。 其中,cookie是存储在浏览器的一段文本,而localStorage和sessionStorage则是HTML5中所提供的本地存储。

那么,这几种数据存储方式之间有什么区别呢?让我们来了解一下。

1.cookie

cookie是什么?cookie就是一段文本,它存储在客户端(通常来说是浏览器),目前为各大主流浏览器存储数据所用。 一般来说用其存储的数据有比如:名字、密码、日期...等信息。cookie存储的数据能在客户端上保留相当长的时间。

分析:用cookie存储的数据有大小限制,一般不可超过4096 个字节(4kb),而且cookie的安全系数不高,有被篡改的风险。 不过其好处是几乎支持所有浏览器。

2.localStorage 和 sessionStorage

localStorage和sessionStorage是HTML5 提供的两种在客户端存储数据的新方法。 主要目的是为了克服由cookie所带来的一些限制,当数据需要被严格控制在客户端时,不需要持续的将数据发回服务器。 同时它们能够存储的数据大小一般都是:5MB,可以在不影响网站性能的前提下将大量数据存储于本地。

localStorage是本地存储,它的生命周期是永久的,关闭页面或浏览器之后localStorage中的数据也不会消失。除非主动删除数据,否则数据永远不会消失。

sessionStorage是会话存储,它是针对一个session(会话) 进行数据存储,它的生命周期仅在当前会话下有效。当用户关闭浏览器窗口后,数据将会被实时删除。

分析:localStorage和sessionStorage的存储空间更大; 数据不会传送到服务器,减少了客户端和服务器端的交互,节省了网络流量; 同时数据不发送到服务器端,不会担心数据被截获,安全性相对于cookie更高一些。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 将做好的前端组件制作成npm包发布

    这个问题是我们使用了淘宝镜像的问题,使用的是淘宝源cnpm,登陆到的是cnpm,我们把它切换成npm就好了。

    colezhou
  • 今天创建了个人博客

    此问题的解决方法是:修改根目录下的配置文件_config.yml,修改deploy节点。原因是没有配置正确的git仓库地址。

    colezhou
  • Ant Motion动效插件分析

    通过调用封装的组件,部署组件DOM结构和其上面的参数完成动画效果的添加,同时用户可以更改组件的参数以及自定义组件的样式来实现所需要的展示效果。

    colezhou
  • 两个字符串算法

    这部分主要使用了动态规划的技术,就是如果两个最大公共子序列相等的话,必然前面的也相等

    哒呵呵
  • flask的cookie和session

      在Flask的框架中,自己已经封装了 cookie的respons,request 有存储就有读取及删除,那么就拿购物车来举例

    用户2398817
  • Cookie, Session, Token,WebStorage你懂多少?

    最近遇见一个好玩的bug, 现象是页面刷新白屏,RootCause是Header里放的cookie太多了, 大小超出了4kb的限制.

    Criss@陈磊
  • 我是如何面试QA的。

    最近遇见一个好玩的bug, 现象是页面刷新白屏,RootCause是Header里放的cookie太多了, 大小超出了4kb的限制.

    iTesting
  • 区块链+基因检测可行?不暴露个人信息就能测序基因组!

    当生物学研究人员晚上入睡时,他们通常会梦到基因组。你的、我的、以及我们之间“六度分离理论”所涉及的所有人(六度分离理论指“你和任何一个陌生人之间所间隔的人不会...

    区块链大本营
  • PHP防止直接访问.php 文件的方法

    zcqshine
  • 安装CUDA

    嗯,本渣又回到了科研道路上了。这次讲讲怎么安装CUDA 当然,你需要要把GPU插到电脑上,然后,嗯,把显示器插到GPU的口上(别问我怎么知道的)。显卡的型号是:...

    用户1148523

扫码关注云+社区

领取腾讯云代金券