资讯专栏INFORMATION COLUMN

前端培训-初级阶段(17) - 数据存储(cookie、session、stroage)

lifefriend_007 / 1643人阅读

摘要:前端最基础的就是。这是初级阶段的最后一堂了。敏感数据要设置防止意外的被他人获取。是什么服务器端存放数据。都是用来做浏览器端存储的。解决的问题的存储大小问题。该使用索引来实现对该数据的高性能搜索。

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。

这是初级阶段的最后一堂了。之后的内容插入了一些实际场景review

我们要讲什么

cookie是什么?用来解决问题?有什么注意点?

session是什么?用来解决问题?有什么注意点?

stroage是什么?用来解决问题?有什么注意点?

其他内容(IndexedDB、WebSQL)

cookie cookie 是什么?

cookie是一个存放在浏览器端的内容,可以在请求服务端的时候时候带在header中,下图可以看到关键词有name,value,Domain,path,Expires/max-age,http,secure,可以打开自己的浏览器研究一下。

name 就是key获取的,

value 就是值,和name是对应的。

domain 就是所属域名,比如 sf.gg 的就不能被 baidu.com 获取。

path 是所属路径 /im 就不能获取 /live 下面的,所以一般公共的都放在根目录

expires 是失效时间,有会话级别的-关闭浏览器就失效。有时间级别的-到点失效。

httponly 只有服务端能获取到,接口访问的时候也会自动带上。但是 document.cookie 拿不到

cookie 解决了什么问题

浏览器的访问是无状态,意味着服务器不理解两次请求是不是同一个人。所以他可以通过 cookie 做一个唯一标识。然后每次访问都带上,这样服务器就可以知道这是同一个人。所以说 cookie 是重要的,如果别人拿到了你的 cookie,他就是你。

cookie 使用中有什么要注意的

各个浏览器的容量是不一样的(条数)。

cookie 的不要放大量数据,因为这些数据会用在每次请求上。

敏感数据要设置 httponly ,防止意外的被他人获取。

session session是什么?

服务器端存放数据。一般来说生成一个sessionID,放在cookie里面。浏览器的请求来了之后,拿着sessionID去查到详细信息。一般来说都是使用过期时间

session用来解决什么问题?

cookie不适合存放大量数据、敏感数据。比如说userid,不能说用户改啥就是啥。比如说一些内部的判断条件。就给浏览器端一个id,来服务器端查就ok了。

session 使用时需要注意什么?

服务器的事情,咱们前端就不管了吧。爱咋用咋用。

stroage stroage是什么?

浏览器支持两种 localstroage 和 sessionStroage。都是用来做浏览器端存储的。

localStroage 是用来跨页面使用的,可以长久存储。当然是同源的页面。

sessionStroage 是用来存放本页面的数据的,关闭页面就清空了。

stroage解决的问题

cookie的存储大小问题。页面通信的问题。真正提供了前端存储能力

stroage使用的时候需要注意什么?

存储的值都为String。

存储是同步的。localstroage的改变会通知给其他页面stroage事件

支持大小是5MB,当然也不准咯,看浏览器厂商的实现。

其他内容(IndexedDB、WebSQL)

IndexedDB

IndexedDB 是一种低级API,用于客户端存储大量结构化数据(包括, 文件/ blobs)。该API使用索引来实现对该数据的高性能搜索。虽然 Web Storage 对于存储较少量的数据很有用,但对于存储更大量的结构化数据来说,这种方法不太有用。IndexedDB提供了一个解决方案。

WebSQL

将要废弃的方案。

其他的封装库

对于简单的情况可能看起来太复杂。如果你更喜欢一个简单的API,尝试二次封装的类库如localForage、dexie.js、ZangoDB。

后记

主讲人文章-2019-04-25

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

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

相关文章

  • 前端培训-中级阶段(4)- BOM 浏览器对象模型(2019-07-04期)

    摘要:提供了与浏览器窗口进行交互的对象标签之间不会共享。用于描述当前浏览器的历史记录。表示窗口是否以全屏显示。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。 前面我们已经基本掌握常规的语法语义,以及基...

    smallStone 评论0 收藏0
  • 前端培训-中级阶段(4)- BOM 浏览器对象模型(2019-07-04期)

    摘要:提供了与浏览器窗口进行交互的对象标签之间不会共享。用于描述当前浏览器的历史记录。表示窗口是否以全屏显示。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。 前面我们已经基本掌握常规的语法语义,以及基...

    h9911 评论0 收藏0
  • 前端培训-中级阶段(11、12)- 跨域请求原理以及实现(2019-08-22期)

    摘要:上节我们讲了同源策略,这节我们讲讲如何跨域。当这些从的脚本执行出错,因为违背了同源策略为了保证用户信息不被泄露,错误信息不会显示出来,取而代之只会返回一个。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每...

    binaryTree 评论0 收藏0
  • 前端培训-中级阶段(10)- 同源策略(2019-08-15期)

    摘要:同源策略是什么同源策略是浏览器的一个安全功能,不同源的数据禁止访问。或许你可以说验证,在浏览器没有同源策略的情况下这些都可以绕过去。总结同源策略是蛮好的,防御了大部分的攻击。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思...

    heartFollower 评论0 收藏0
  • 前端培训-中级阶段(6)- jQuery的事件绑定链式操作及原理(2019-07-25期)

    摘要:前端最基础的就是。帮助从旧的事件方法转换,和。方法移除用绑定的事件处理程序。特定的事件处理程序可以被移除元素上提供事件名称,命名空间,处理函数。用于过滤器的触发事件的选择器元素的后代。事件触发模拟触发原生使用触发。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS)...

    Airy 评论0 收藏0

发表评论

0条评论

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