好程序员web前端培训分享JavaScript学习笔记cookie
好程序员web前端培训分享JavaScript学习笔记cookie,cookie 是一个以字符串的形式存储数据的位置
每一个 HTTP 请求都会在请求头中携带 cookie 到服务端
每一个 HTTP 响应都会在响应头中携带 cookie 到客户端
也就是说,cookie 是不需要我们手动设置,就会自动在 客户端 和 服务端之间游走的数据
我们只是需要设置一下 cookie 的内容就可以
COOKIE 的存储形式
cookie 是以字符串的形式存储,在字符串中以 key=value 的形式出现
每一个 key=value 是一条数据
多个数据之间以 ; 分割
// cookie 的形态'a=100; b=200; c=300;'
COOKIE 的特点
.存储大小有限制,一般是 4 KB 左右
.数量有限制,一般是 50 条左右
.有时效性,也就是有过期时间,一般是 会话级别(也就是浏览器关闭就过期了)
.有域名限制,也就是说谁设置的谁才能读取
使用方式
读取 cookie 的内容使用 document.cookie
const cookie = document.cookieconsole.log(cookie) // 就能得到当前 cookie 的值
设置 cookie 的内容使用 document.cookie
// 设置一个时效性为会话级别的 cookiedocument.cookie = 'a=100'// 设置一个有过期时间的 cookiedocument.cookie = 'b=200;expires=Thu, 18 Dec 2043 12:00:00 GMT";'// 上面这个 cookie 数据会在 2043 年 12 月 18 日 12 点以后过期,过期后会自动消失
删除 cookie 的内容使用 document.cookie
// 因为 cookie 不能直接删除// 所以我们只能把某一条 cookie 的过期时间设置成当前时间之前// 那么浏览器就会自动删除 cookiedocument.cookie = 'b=200;expires=Thu, 18 Dec 2018 12:00:00 GMT";'
COOKIE 操作封装
因为 js 中没有专门操作 COOKIE 增删改查的方法
所以需要我们自己封装一个方法
设置 cookie
/* setCookie 用于设置 cookie @param {STRING} key 要设置的 cookie 名称 @param {STRING} value 要设置的 cookie 内容 @param {NUMBER} expires 过期时间 /function setCookie (key, value, expires) {
const time = new Date()
time.setTime(time.getTime() - 1000 60 60 24 8 + expires) // 用于设置过期时间
document.cookie = ${key}=${value};expires=${time};
}
读取 cookie
/* getCookie 获取 cookie 中的某一个属性 @param {STRING} key 你要查询的 cookie 属性 @return {STRING} 你要查询的那个 cookie 属性的值 */function getCookie(key) {
const cookieArr = document.cookie.split(';')
let value = ''
cookieArr.forEach(item => {
if (item.split('=')[0] === key) { value = item.split('=')[1] }
})
return value}
删除 cookie
/* delCookie 删除 cookie 中的某一个属性 @param {STRING} name 你要删除的某一个 cookie 属性的名称 /function delCookie(name) {
setCookie(name, 1, -1)}
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
好程序员web前端培训分享JavaScript学习笔记ajax及ajax封装
好程序员web前端培训分享JavaScript学习笔记ajax及ajax封装,ajax全名async javascript and XML是前后台交互的能力也就是我们客户端给服务端发送消息的工具,以及接受响应的工具是一个默认异步执行机制的功能AJAX 的优势.不需要插件的支持,原生 js 就可以使用.用户体验好(不需要刷新页面就可以更新数据).减轻服务端和带宽的负担.缺点: 搜索引擎的支持度不够,因为数据都不在页面上,搜索引擎搜索不到AJAX 的使用在 js 中有内置的构造函数来创建 ajax 对象创建 ajax 对象以后,我们就使用 ajax 对象的方法去发送请求和接受响应创建一个 ajax 对象// IE9及以上const xhr = new XMLHttpRequest()// IE9以下const xhr = new ActiveXObject('Mricosoft.XMLHTTP')上面就是有了一个 ajax 对象我们就可以使用这个xhr对象来发送 ajax 请求了配置链接信息const xhr = new XMLHttpRequest()// xhr 对象中的 ...
- 下一篇
好程序员web前端培训分享详解JavaScript学习笔记构造函数
好程序员web前端培训分享详解JavaScript学习笔记构造函数,面向对象:首先,我们要明确,面向对象不是语法,是一个思想,是一种编程模式。面向: 面(脸),向(朝着)面向过程: 脸朝着过程 =》 关注着过程的编程模式面向对象: 脸朝着对象 =》 关注着对象的编程模式实现一个效果在面向过程的时候,我们要关注每一个元素,每一个元素之间的关系,顺序,。。。在面向过程的时候,我们要关注的就是找到一个对象来帮我做这个事情,我等待结果例子 : 我要吃面条面向过程用多少面粉用多少水怎么和面怎么切面条做开水煮面吃面面向对象找到一个面馆叫一碗面等着吃面向对象就是对面向过程的封装我们以前的编程思想是,每一个功能,都按照需求一步一步的逐步完成我们以后的编程思想是,每一个功能,都先创造一个面馆,这个面馆能帮我们作出一个面(完成这个功能的对象),然后用面馆创造出一个面,我们只要等到结果就好了创建对象的方式因为面向对象就是一个找到对象的过程所以我们先要了解如何创建一个对象调用系统内置的构造函数创建对象js 给我们内置了一个 Object构造函数这个构造函数...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Linux系统CentOS6、CentOS7手动修改IP地址
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- Red5直播服务器,属于Java语言的直播服务器
- SpringBoot2初体验,简单认识spring boot2并且搭建基础工程
- SpringBoot2全家桶,快速入门学习开发网站教程
- CentOS8编译安装MySQL8.0.19
- CentOS7,CentOS8安装Elasticsearch6.8.6
- SpringBoot2整合Redis,开启缓存,提高访问速度
- CentOS6,CentOS7官方镜像安装Oracle11G
- Windows10,CentOS7,CentOS8安装Nodejs环境