JavaScript cookie原理及使用实例

网络编程 2024/9/22 佚名

3 1 2

什么是cookie？

cookie 是本地计算机的临时存储。

作用：在浏览器中进行数据的存储,用户名、密码（比如：保存页面信息，自动登录等）。

特点：

cookie需要在服务器环境下运行；
cookie的容量在4kb左右，限制为每个域名50个cookie个数(IE)，不同浏览器容量和个数不同；
cookie以字符串类型存储，不同域名存储的数据是无法共享；
cookie默认是临时存储的，当浏览器关闭时，自动销毁；
cookie可以被禁用也可以删除，且安全性不高。
可以对cookie值进行加密(MD5);

读取和设置cookie

document.cookie = "user=123456";
console.log(document.cookie); //user=123456

使用f12查看当前页面存储的cookie

注意：

在打开网址时或者提交表单时自动裹挟着cookie数据发送到服务器，并且服务端程序可以继续裹挟着新的cookie内容存储在你的电脑的cookie中。

设置cookie的生存期

　　格式：document.cookie = “名称=值；expires=” + 时间；（时间必须是一个字符串）。

var date=new Date();
date.setHours(date.getHours()+1);//设置1小时的生存期
// document.cookie="a=3"; //先存入a=3，只运行第一次
console.log(document.cookie);
var a=Number(document.cookie.split("=")[1]);
a++;
document.cookie="a="+a+";expires="+date.toUTCString();

　　上面代码表示：设置cookie在当前时间的一个小时后过期，第一次运行先存入a为3的值，然后把cookie的值从字符串转为数值型，再进行累加，每次设置生存期都要把data对象转为字符串类型(toUTCString)。

在生存期内的cookie，关闭页面不会销毁，生存期结束，关闭页面销毁cookie；

cookie存储多个数据

var obj={
      user:"xietian",
      age:30,
      sex:"男"
    }
    function setCookie(obj,date){
      for(var prop in obj){
        document.cookie=prop+"="+obj[prop]+(date ";expires="+date.toUTCString() : "");
      }
    }
    var date=new Date();
    date.setFullYear(2021); 
    setCookie(obj,date);

使用reduce获取多个cookie值

var o=getCookie();
   console.log(o);
    function getCookie(){
      return document.cookie.split("; ").reduce((value,item)=>{
          var arr=item.split("=");
          value[arr[0]]=isNaN(arr[1]) ? arr[1] : Number(arr[1]);//数字(年龄)需要转为数值型
          return value;
      },{});
    }

关于cookie安全

　　XSS攻击：XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序(百度百科)。

　　XSS攻击需要具备的条件：

1. 必须是同一个域当中页面的表单提交，必须有文本内容提交

2. 提交的内容需要被放置在页面中，例如评论等内容

3. 在提交的文本中出现script标签，并且这个标签没有被替代，直接放入在页面中

4. 这个页面可以被所有用户查看到

5. 这个script标签具备一定的盗窃cookie特征

　　解决办法

提交页面时将script标签过滤再提交；

但可以通过插入图片的超链接，点击是执行JavaScript脚本；遇到这种时就需要将JavaScript脚本替换

关于cookie安全还要其他攻击方式这里只简单介绍一下cookie，深入了解请上网查询资料。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

JavaScript,cookie,原理

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“JavaScript cookie原理及使用实例”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年09月22日

JavaScript cookie原理及使用实例

JavaScript ES6 Class类实现原理详解

JavaScript中的各种宽高属性的实现

评论“JavaScript cookie原理及使用实例”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接