Cookie的封装、Cookie的注意事项
时间:2023-03-24
本文章向大家介绍Cookie的封装、Cookie的注意事项,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
Cookie的封装
封装Cookie
使用封装好的Cookie实现网站语言切换
Cookie.html页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Cookie的封装</title> <!-- <script src="../static/js/jquery-3.6.1.min.js" type="text/javascript" charset="utf-8"></script>--> <!-- <script src="../static/js/cookie.js" type="text/javascript" charset="utf-8"></script>--> </head> <body> <button id="cn">中文</button> <button id="en">英文</button> <script type="module"> // import{set,get,remove} from '../static/js/cookie'; // import {set,get,remove} from '../static/js/cookie.js'; // set('username','alex'); // set('username','zs'); // set('age',18); // set('用户名','张三'); // set('sex','male',{ // maxAge:30*24*3600, // }) // remove('username'); // remove('用户名') // console.log(get('username')); // console.log(get('age')); // console.log(get('用户名')); // console.log(get('sex')); // 使用封装好的Cookie实现网站语言切换 import {set} from '../static/js/cookie.js'; const cnBtn = document.getElementById('cn'); const enBtn = document.getElementById('en'); cnBtn.addEventListener( 'click', () => { set('language','cn',{ maxAge:30 * 24 * 3600 }); window.location = 'Cookie.html'; }, false ); enBtn.addEventListener( 'click', () => { set('language','en',{ maxAge:30 * 24 * 3600 }); window.location = 'Cookie.html'; }, false ); </script> </body> </html>
cookie.js文件
// 写入Cookie const set = (name,value, {maxAge,domain,path,secure} = {}) =>{ let cookieText = `${encodeURIComponent(name)}= ${encodeURIComponent(value)}`; if (typeof maxAge === 'number') { cookieText += `; max-age=${maxAge}`; } if (domain) { cookieText += `; domain=${domain}`; } if (path) { cookieText += `; path=${path}`; } if (secure) { cookieText += `; secure`; } document.cookie = cookieText; // document.cookie='username=alex; max-age=5; domain=' }; // 通过name获取cookie的值 const get = name => { name = `${encodeURIComponent(name)}`; const cookies = document.cookie.split('; ') for (const item of cookies) { const [cookieName,cookieValue] = item.split('='); if (cookieName === name) { return decodeURIComponent(cookieValue); } } return; }; // 'username=alex; age=18; sex=male' // ['username=alex', 'age=18', 'sex=male'] // ["username","alex"] // get('用户名'); // 根据name、domain和path删除Cookie const remove = (name,{domain,path} = {}) =>{ set(name,'',{domain,path,maxAge:-1}); }; export {set,get,remove};
Cookie的注意事项
前后端都可以写入和获取Cookie
Cookie有数量限制
每个域名下的Cookie数量有限
当超过单个域名限制之后,再设置Cookie,浏览器就会清除以前设置的Cookie
Cookie有大小限制
每个Cookie的存储容量很小,最多只有4KB左右
原文地址:https://www.cnblogs.com/wsfj/p/17206051.html
- python SVM 案例,sklearn.svm.SVC 参数说明
- 利用Theano理解深度学习——Auto Encoder
- sudo 出现unable to resolve host 解决方法
- Hadoop学习笔记——Hadoop常用命令
- 可扩展机器学习——Spark分布式处理
- GO语言并发编程之互斥锁、读写锁详解
- DBCA静默建库中的两个小问题 (r9笔记第28天)
- dataframe进行常用统计、分组统计平均绝对偏差等操作函数。
- Java案例-判断随机整数是否是素数
- Go语言实现猜数字小游戏的方法
- go lang连接mysql数据库
- Java案例-打印九宫格
- 【Go 语言社区】算法课程 第一季 第4节 100以内的素数
- Java案例-数组求余问题
- 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 数组属性和方法
- Laravel框架之解决前端显示图片问题
- thinkPHP5.1框架中Request类四种调用方式示例
- Python TestSuite生成测试报告过程解析
- PHP goto语句用法实例
- laravel5.5安装jwt-auth 生成token令牌的示例
- Windows环境下安装PHP Pear的方法图文教程
- php菜单/评论数据递归分级算法的实现方法
- 关于laravel5.5的定时任务详解(demo)
- 用PHP做了一个领取优惠券活动的示例代码
- Laravel 自定命令以及生成文件的例子
- 深入了解Python 变量作用域
- Laravel5.5 数据库迁移:创建表与修改表示例
- python代码能做成软件吗
- php适配器模式简单应用示例
- Python 解析简单的XML数据