Cookie 的简单封装
时间:2019-11-11
本文章向大家介绍Cookie 的简单封装,主要包括Cookie 的简单封装使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
对于前端工程师来说,在项目开发过程中 cookie 的相关操作还是经常会遇到的,但是直接用原生的方法代码显得不够简洁和语义化,在项目里我们稍稍封装一下,类似于Storage对象的API
,然后在使用时就会方便很多,如下:
/** * docCookies.setItem(name, value[, end[, path[, domain[, secure]]]]) * docCookies.getItem(name) * docCookies.removeItem(name[, path], domain) * docCookies.hasItem(name) * docCookies.keys() * */ let docCookies = { getItem: function (sKey) { return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[-.+*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null; }, setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) { if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; } let sExpires = ""; if (vEnd) { switch (vEnd.constructor) { case Number: sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd; break; case String: sExpires = "; expires=" + vEnd; break; case Date: sExpires = "; expires=" + vEnd.toUTCString(); break; } } document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : ""); return true; }, removeItem: function (sKey, sPath, sDomain) { if (!sKey || !this.hasItem(sKey)) { return false; } document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + ( sDomain ? "; domain=" + sDomain : "") + ( sPath ? "; path=" + sPath : ""); return true; }, hasItem: function (sKey) { return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[-.+*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); }, keys: function () { let aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/); for (let nIdx = 0; nIdx < aKeys.length; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]) } return aKeys } }
使用参数:
docCookies.setItem("test0", "Hello world!"); docCookies.setItem("test1", "Unicode test: \u00E0\u00E8\u00EC\u00F2\u00F9", Infinity); docCookies.setItem("test2", "Hello world!", new Date(2020, 5, 12)); docCookies.setItem("test3", "Hello world!", new Date(2027, 2, 3), "/blog"); docCookies.setItem("test4", "Hello world!", "Sun, 06 Nov 2022 21:43:15 GMT"); docCookies.setItem("test5", "Hello world!", "Tue, 06 Dec 2022 13:11:07 GMT", "/home"); docCookies.setItem("test6", "Hello world!", 150); docCookies.setItem("test7", "Hello world!", 245, "/content"); docCookies.setItem("test8", "Hello world!", null, null, "example.com"); docCookies.setItem("test9", "Hello world!", null, null, null, true); docCookies.setItem("test1;=", "Safe character test;=", Infinity); console.log(docCookies.keys().join("\n")); console.log(docCookies.getItem("test1")); console.log(docCookies.getItem("test5")); docCookies.removeItem("test1"); docCookies.removeItem("test5", "/home"); console.log(docCookies.getItem("test1")); console.log(docCookies.getItem("test5")); console.log(docCookies.getItem("unexistingCookie")); console.log(docCookies.getItem()); console.log(docCookies.getItem("test1;="));
原文地址:https://www.cnblogs.com/cmyoung/p/11836932.html
- 用一个命令使用 Docker Compose 安装Mesos
- C语言/C加加新手入门学习经验资料分享,基础知识大汇总!
- 云数据服务蜂拥而至...好难选呀
- ASP.NET MVC的Razor引擎:View编译原理
- ASP.NET Core中的依赖注入(4): 构造函数的选择与服务生命周期管理
- 通过Knockout.js + ASP.NET Web API构建一个简单的CRUD应用
- 自动驾驶车辆在2017年的七大光辉历史时刻
- 简单的实现Javascript的MVC
- 谷歌再出黑科技!人工智能模拟的人声和真人几乎难以分辨
- 【Scikit-Learn 中文文档】高斯混合模型 - 无监督学习 - 用户指南 | ApacheCN
- “E+单拼”组合域名eqi.com小六位结拍
- ASP.NET Core中的依赖注入(3): 服务的注册与提供
- 【Scikit-Learn 中文文档】使用 scikit-learn 介绍机器学习 | ApacheCN
- 哈萨比斯:2018年AI最大突破在生物或化学领域
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android如何通过Retrofit提交Json格式数据
- python-jsonpath 解析神器
- Android中自定义ImageView添加文字设置按下效果详解
- Android中使用Kotlin实现一个简单的登录界面
- Android编程实现webview将网页打包成apk的方法
- Android 实现代码混淆的实例
- Android中复制图片的实例代码
- Android 两种启动模式的实例详解
- Retrofit2.0 实现图文(参数+图片)上传方法总结
- Android中使用GridView实现仿微信图片上传功能(附源代码)
- Android下载进度监听和通知的处理详解
- Android上传多张图片的实例代码(RxJava异步分发)
- Android仿微信语音消息的录制和播放功能
- Android如何自定义升级对话框示例详解
- Android Tiny集成图片压缩框架的使用