前端培训-中级阶段(17)-数据存储(cookie.session,stroage)

简介: 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。这是初级阶段的最后一堂了。之后的内容插入了一些实际场景和review.

我们要讲什么


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


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


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


  1. 其他内容(IndexedDB、WebSQL)


cookie


cookie 是什么?


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


  1. name 就是key获取的,


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


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


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


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


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


bVbsrxZ.webp.jpg


cookie 解决了什么问题


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


cookie 使用中有什么要注意的


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


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


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


session


session是什么?


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


session用来解决什么问题?


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


session 使用时需要注意什么?


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


stroage


stroage是什么?


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


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


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


stroage解决的问题


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


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


  1. 存储的值都为String。


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


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


其他内容(IndexedDB、WebSQL)


  1. IndexedDB


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

2.WebSQL


将要废弃的方案。

3.其他的封装库


对于简单的情况可能看起来太复杂。如果你更喜欢一个简单的API,尝试二次封装的类库如 localForagedexie.jsZangoDB
相关文章
|
6月前
|
前端开发
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
|
存储 缓存 前端开发
详解前端数据存储
详解Cookie, Session, SessionStorage, LocalStorage 引言 在Web开发中,数据的存储和管理是非常重要的。Cookie、Session、SessionStorage和LocalStorage是常见的Web存储解决方案。本文将详细介绍这些概念,比较它们的特点和用法,并提供相关的代码示例。
192 0
|
5月前
|
存储 前端开发 小程序
表白墙完善(数据库,前端,后端Servlet),再谈Cookie和Session。以及一个关于Cookie的练习小程序
表白墙完善(数据库,前端,后端Servlet),再谈Cookie和Session。以及一个关于Cookie的练习小程序
|
3月前
|
存储 前端开发 JavaScript
揭秘!JavaScript本地存储的四大绝技:从Cookie到IndexedDB,让你的Web应用秒变数据存储高手,轻松应对各种挑战!
【8月更文挑战第4天】JavaScript为核心前端技术,提供多样本地存储方案以优化用户体验与减少服务器负载。首先,Cookie虽用于基本数据如登录状态,但受大小限制及安全性影响。接着,Web Storage中的LocalStorage持久存储不变数据,SessionStorage则限于单次会话。更进一步,IndexedDB作为全面数据库解决方案,支持复杂数据操作但使用较复杂。每种方式根据应用需求各有优势。
65 9
|
4月前
|
存储 JSON 开发框架
循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储
循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储
|
6月前
|
前端开发
前端Cookie的使用
前端Cookie的使用
41 1
|
存储 前端开发
前端学习笔记202306学习笔记第三十七天-js-数据存储2
前端学习笔记202306学习笔记第三十七天-js-数据存储2
61 0
|
6月前
|
存储 前端开发 Java
【源码共读】在前端如何操作 Cookie
【源码共读】在前端如何操作 Cookie
113 1
|
存储 前端开发 API
Session、Cookie、localStorage和SessionStorage是Web前端开发中常用的数据存储方式,它们之间各有不同的特点和适用场景。
Session、Cookie、localStorage和SessionStorage是Web前端开发中常用的数据存储方式,它们之间各有不同的特点和适用场景。
90 0
|
存储 前端开发
前端学习笔记202305学习笔记第三十二天-js-再次强调数据存储
前端学习笔记202305学习笔记第三十二天-js-再次强调数据存储
44 0