设计模式-cookie
2024-06-04 00:34:37
typora-root-url: images
typora-copy-images-to: images
单例模式
什么是单例模式
单例模式也称作为单子模式，单体模式。单例模式的定义是产生一个类的唯一实例，是软件设计中较为简单但是很常用的一种设计模式。
单例模式的核心是确保只有一个类一个实例，并提供全局访问.
单例的使用
核心思想
无非是用一个变量来标志当前是否已经为某个类创建过对象，如果是，则在下一次获取该类的实例时，直接返回之前创建的对象
多次实例化,返回一个对象
function fn(){console.log(1111);if(!fn.obj){fn.obj={name:'cheng'}}return fn.obj;}var obj1 = new fn();var obj2 = new fn();console.log(obj1==obj2);
分析:
这是一个最经典的惰性单例，如果实例不存在，通过一个方法创建一个实例，如果已经存在，则返回实例的引用。这里就说明了它和静态对象不同，可以被延迟生成，也就是说在我们需要的时候才创建对象实例，而非在页面加载时就创建。
ES6中的实现
class A{obj = '';say(){console.log('哈哈');}static getObj(){if(!this.obj){this.obj = new A;}return this.obj;}}let a1 = A.getObj();let a2 = A.getObj();console.log(a2);console.log(a1===a2);
单例模式实现弹出框(了解)
不管点击多少次,只会实例化一次
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><script>/*自定义弹出层+ 从 html 到 css 到 js 效果全部由 Dialog 类实现*/// 需要弹出层的时候// success 成功 绿色// warning 警告 橘黄色// danger 危险 红色// info 信息 蓝色// default 默认 白色const Dialog = (function () {// 专门准备一个设置 css 样式的方法// ele 表示给哪一个元素设置// styles 表示设置哪些样式 { left: '100px', right: '200px' }function setStyle(ele, styles) {for (let k in styles) {ele.style[k] = styles[k]}}// 照常书写构造函数class Dialog {constructor () {// 创建一个 divthis.ele = document.createElement('div')// 准备一个备选的数组this.status = [{ color: '#fff', text: '', type: 'default' },{ color: 'orange', text: '警告', type: 'warning' },{ color: 'green', text: '成功', type: 'success' },{ color: 'red', text: '错误', type: 'danger' },{ color: 'skyblue', text: '信息', type: 'info' }]this.init()}// 准备 init 函数init () {// 设置 div 内部的结构this.setDivInnerHtml()// 设置 div 内部的样式this.setDivInnerStyle()// 设置 div 内的事件this.setEvent()// 把 div 插入到页面document.body.appendChild(this.ele)}// 准备 change 函数change (type, msg) {// 调整 top 和 bottom 的颜色// 1. 确定颜色const status = this.status.find(item => item.type === type) || { color: '#fff', text: '', type: 'default' }// 2. 调整颜色this.setColors(status)// 3. 修改文本this.setText(msg)// 4. 让 this.ele 显示出来this.ele.style.display = 'flex'}// 需要一个方法, 确定 div 内的 html 结构setDivInnerHtml () {this.ele.innerHTML = `<div class="top">错误</div><div class="center">注册失败, 该用户名已经被占用</div><div class="bottom"><button>关闭</button></div>`}// 需要一个方法, 设置 div 及内部所有标签的样式setDivInnerStyle () {// this.ele 设置样式, 设置好几个// this.ele 下面的 .top 需要设置 好几个// this.ele 下面的 .bottom 需要设置 好几个setStyle(this.ele, {width: '500px',height: '300px',border: '3px solid #333','background-color': '#fff',position: 'fixed',top: '0',left: '0',right: '0',bottom: '0',margin: 'auto',display: 'none','flex-direction': 'column'})const topBox = this.ele.querySelector('.top')const centerBox = this.ele.querySelector('.center')const bottomBox = this.ele.querySelector('.bottom')const btn = this.ele.querySelector('button')setStyle(topBox, {height: '35px',display: 'flex','align-items': 'center','box-sizing': 'border-box',padding: '0 20px','background-color': 'red',color: '#fff'})setStyle(bottomBox, {height: '35px',display: 'flex','align-items': 'center','box-sizing': 'border-box',padding: '0 20px','background-color': 'red',color: '#fff','justify-content': 'flex-end'})setStyle(centerBox, {flex: '1',display: 'flex','justify-content': 'center','align-items': 'center','font-size': '24px'})setStyle(btn, {cursor: 'pointer'})}// 需要一个方法, 能让 div 隐藏起来setEvent () {const btn = this.ele.querySelector('button')btn.addEventListener('click', () => {this.ele.style.display = 'none'})}// 需要一个方法, 调整 .top 和 .bottom 的颜色setColors ({ color, text }) {const topBox = this.ele.querySelector('.top')topBox.style['background-color'] = colortopBox.innerText = textconst bottomBox = this.ele.querySelector('.bottom')bottomBox.style['background-color'] = color}// 需要一个方法, 调整 .center 内的文本内容setText (msg) {const centerBox = this.ele.querySelector('.center')centerBox.innerText = msg}}// 单例模式核心代码let instance = nullreturn function (type, msg) {if (!instance) instance = new Dialog()instance.change(type, msg)return instance}
})()new Dialog('warning', '删除后不能恢复')</script>
</body>
</html>Web Storage
cookie
认识 cookie
- cookie中的数据 可以被同一个网站的页面所共享
- 不同浏览器的cookie 不能共享
- cookie的数据存储在浏览器中，每次请求服务器，在请求报文中携带cookie的数据，发送给服务器
- 服务器端无法直接操作cookie，是通过在服务器端设置响应头的的方式，通知浏览器对cookie进行设置，
- cookie中的数据有效期，不设置是会话级别的, 浏览器关闭，会话结束，数据销毁,可以人为设置cookie的有效期
- cookie存储容量小，约4kb
操作cookie
一定通过服务器的方式就行访问
基本使用
语法格式
设置cookie:
document.cookie="username=John;expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";存储的值 有效时间 适用范围注意:此处的有效期是时间字符串.读取cookie
document.cookie删除cookie
直接设置时间过期例1:通过cookie存储name,age,addr数据
// 1. 设置, 要求 键值对, 通过 = 分隔document.cookie = "name=fengfeng";document.cookie = "age=18";document.cookie = "desc=shuai";
//2. 获取, document.cookie 一次性将所有的 cookie 都获取, 以字符串的形式返回//通过 "; " 分隔, name=pengpeng; age=18; desc=shuaiconsole.log( document.cookie );
// 获取cookie中的值document.cookie;问题:一次性存储多个cookie后,没办法获取指定的
例2:设置一个cookie的hobby=maomi一分钟后过期
let d = new Date(); // 获取当前时间对象
let time = d.getTime(); // 获取时间戳
let time1 = d.setTime(时间戳); // 设置需要格式化的事件戳
let expires = d.toGMTString(); // cookie 的有效期,计时不是按照中国时区,所以需要转化let d = new Date();let time = d.getTime(); // 单位是毫秒//console.log(time)//向后设置一分钟d.setTime(time+1*60*1000);let exp = d.toGMTString();// console.log(exp) // 设置cookie,为一分钟过期// 设置cookie过期的是expires// document.cookie='qi=压岁钱;expires='+exp;
cookie的读取封装
class Cookie {// 设置cookiestatic setCookie (name, val, exp = 0) {// 判断是否设置时间if (exp) {let d = new Date();let ms = d.getTime();d.setTime(exp * 60 * 1000 + ms);// 获取且转化为时间字符串exp = d.toGMTString();}// cookie的设置document.cookie = `${name}=${val};expires=${exp}`;}// cookie的获取static getCookie(key) {// 1 判断是否传值if (!key) return;// 2 取出cookie// console.log(document.cookie);let vals = document.cookie;// 2-1 为空则不继续执行if (!vals) return null;// 2-2 不为空,则分割vals = vals.split(';');console.log(vals);// 2-3 遍历寻找目标keylet data = '';// v 是数组的元素vals.forEach((v, i) => {console.log(v.trim());// 2-4 找到下标不为-1且为0的,就是要取的key// console.log(v.trim().indexOf(key));if (v.trim().indexOf(key) == 0) {// console.log((v.split('='))[1]);// forEach内部函数的返回值,外部接收不到// return (v.split('='))[1];data = (v.split('='))[1];}});return data;}
}
cookie的加密
md5加密和base64的加解密
js中session操作
// 保存数据到sessionStorage
sessionStorage.setItem('key', 'value');// 从sessionStorage获取数据
var data = sessionStorage.getItem('key');// 从sessionStorage删除保存的数据
sessionStorage.removeItem('key');// 从sessionStorage删除所有保存的数据
sessionStorage.clear();
localStorage 是js中最常见的存储方式.
cookie和session主要在服务器端使用,保存一次会话信息.PHP.java,NodeJs
面试题
本地存储(记住)
- 指: 说一下 cookie localStorage sessionStroage 的区别1. 存储大小cookie 4KB 左右=> localStorage/sessionStroage 20MB 左右
2 自动携带cookie 会跟随请求自动携带在请求头内=> localStorage/sessionStroage 不会自动携带需要手动设置
3 时效性localStorage 永久=> sessionStroage 会话=> cookie 默认会话级别, 可以自定义设置过期时间
4. 存储位置cookie 必须依赖域名存储=> localStorage/sessionStroage 可以在本地状态下使用
5 前后端操作cookie 前后端都可以操作=> localStorage/sessionStroage 只能前端操作, 后端不行6 session(补充)=> 一个服务器端的存储空间=> 用来支持登陆状态保持的=> 当 session 空间开启以后, 会生成一个 sessionID 的内容自动放在 cookie 内
面试题:数组塌陷
<script>var arr = [1, 2, 3, 4, 5, 6];// 删除数组中的元素,删除不干净// for (var i = 0; i < arr.length; i++) {// arr.splice(i, 1)// }// console.log(arr); // 删除不干净,因为i在变化// 方法1: 设置删除起始位置是0// var length = arr.length;// for (var i = 0; i < length; i++) {// arr.splice(0, 1)// }// 方法2:从尾巴,倒着删除// for (var i = arr.length - 1; i >= 0; i--) {// arr.splice(i, 1)// }// 方法3:让i永远为0,永远删除第一个元素for (var i = 0; i < arr.length; i++) {arr.splice(i, 1);//console.log('a' + i);i--;console.log(i);}console.log(arr);</script>
设计模式-cookie相关推荐
- 前端面试题大集合：来自真实大厂的532道面试题(只有题，没有答案)
答案自己谷歌或百度找. 一.来源背景 面试题是来自微博@牛客网发布的真实大厂前端面经题目,我一直在收集题目长期一个一个的记录下来的,可能会有重复,但基本前端的面试大纲和需要掌握的知识都在其中了,面试题 ...
- okhttp3与okhttp的区别
OkHttpClient创建方式不同, okhttp直接newOkHttpClient,而okhttp3中提供了Builder,很好的使用了创建者设计模式 cookie的设置方式不同: okhttp调 ...
- atitit.php中的dwr 设计模式
atitit.php中的dwr 设计模式 1. dwr的长处相对于ajax来说.. 1 2. DWR工作原理 1 3. php的dwr实现 1 4. 參考 3 1. dwr的长处相对于ajax来说.. ...
- 精通JavaScript--07设计模式：行为型
在本章,我们将继续学习设计模式,着重了解行为型设计模式.我们在第5章所学的创建型设计模式侧重于对象的创建,在第6章所学的结构型设计模式侧重于对象结构,而本章介绍的行为型设计模式则侧重于辅助实现代码库中 ...
- F#中的异步和并行设计模式(三)：代理
在这个系列的第三部分,我们解释了F#中的轻量级代理的和交互式代理,并且看过了一些与之相关的典型的设计模式,包括内部隔离状态. 第一部分分描述了F#是一种并行交互式语言及如何支持轻量级交互操作的,并且为 ...
- 八种架构设计模式及其优缺点概述
1. 什么是架构 我想这个问题,十个人回答得有十一个答案,因为另外的那一个是大家妥协的结果.哈哈,我理解,架构就是 骨架 ,如下图所示: 人类的身体的支撑是主要由骨架来承担的,然后是其上的肌肉.神经. ...
- 项目中用到的设计模式(持续更新)
设计模式的定义:是指在软件开发中,经过验证的,用于解决在特定环境下,重复出现的,特定问题的解决方案. 设计的六大原则: 单一职责原则(Single Responsibility Principle, ...
- php注册树模式,php基础设计模式大全(注册树模式、工厂模式、单列模式)
废话不多说了,先给大家介绍注册树模式然后介绍工厂模式最后给大家介绍单列模式,本文写的很详细,一起来学习吧. php注册树模式 什么是注册树模式? 注册树模式当然也叫注册模式,注册器模式.之所以我在这里 ...
- jsp 将页面中的值导入java中_JavaWeb - JSP：概述和语法，内置对象，JavaBean 组件，MVC 设计模式
JSP 的概述 概念 JSP 是 Java Server Pages 的简称,跟 Servlet 一样可以动态生成 HTML 响应, JSP 文件命名为 xxx.jsp. 与 Servlet 不同,J ...
最新文章
- ebook download websites (to be continue...)
- 如何给TiDB插上全文检索的翅膀
- 《剑指offer》二叉树镜像
- 【转】Hibernate和IBatis对比
- c++现在有一棵合法的二叉树，树的节点都是用数字表示，现在给定这棵树上所有的父子关系，求这棵树的高度
- 在MVC3中怎么实现分类列表？
- 分享一个NI软件卸载工具
- PHP弹窗回送,AJAX 服务器回送数据失败 onreadystatechange没法触发回调函数
- 计算机网络——虚拟专用网与网络地址转换NAT
- 【CVPR2020】Designing Network Design Spaces
- python调用其它程序
- 高分辨率对地观测系统重大科技专项简介
- LINUX去掉“哔哔叫”的方法
- 隐秘而伟大，探访鹏博士大数据双十一背后那些真英雄
- html实现纸张撕边效果,如何打造纸张撕裂效果！（ps教程）
- uniapp微信小程序富文本编辑器组件
- Web09——新闻数据分页
- VC调试程序输出First-chance Exception.
- 通俗易懂的NCE Loss
- vue项目pc端使用rem进行适配 （lib-flexible+postcss-pxtorem）