javaScript中cookie的使用

什么是cookie?

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

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

特点

  1. cookie需要在服务器环境下运行;

  2. cookie的容量在4kb左右,限制为每个域名50个cookie个数(IE),不同浏览器容量和个数不同;

  3. cookie以字符串类型存储,不同域名存储的数据是无法共享;

  4. cookie默认是临时存储的,当浏览器关闭时,自动销毁;

  5. cookie可以被禁用也可以删除,且安全性不高。

  6. 可以对cookie值进行加密(MD5);

  • 读取和设置cookie
document.cookie = "user=123456";
console.log(document.cookie); //user=123456

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

注意:

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

  • 设置cookie的生存期

  格式:document.cookie = “名称=值;expires=” + 时间;(时间必须是一个字符串)。

1 var date=new Date();
2 date.setHours(date.getHours()+1);//设置1小时的生存期
3 // document.cookie="a=3"; //先存入a=3,只运行第一次
4 console.log(document.cookie);
5 var a=Number(document.cookie.split("=")[1]);
6 a++;
7 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特征

    •   解决办法

    1. 提交页面时将script标签过滤再提交;

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

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

(0)

相关推荐

  • 前端教程:JavaScript Cookies

    Web浏览器和服务器使用HTTP协议进行通信,并且HTTP是一种无状态协议.但对于一个商业网站它需要保持不同的页面间的会话信息.例如在完成多页后,一个用户注册结束.但是,如何保持所有网页用户的会话信息 ...

  • javascript中的闭包这一篇就够了

    前端技术优选 今天 以下文章来源于程序员成长指北 ,作者koala 程序员成长指北专注 Node.js 技术栈分享,从 前端 到 Node.js 再到 后端数据库,祝您成为优秀的高级 Node.js ...

  • 「知识点」JavaScript 中11个有趣的事实

    「知识点」JavaScript 中11个有趣的事实

  • Android中Cookie获取、保存以及同步

    Android中Cookie获取、保存以及同步

  • Javascript 中数据类型那些可能会中招的细节

    大迁世界 3月4日 作者:moonshinean https://moonshinean.github.io/blogs 前言 Javascript的数据类型对于大家来说一点都不默认,主要基本数据局类 ...

  • 如何在现代JavaScript中编写异步任务

    前言在本文中,我们将探讨过去异步执行的 JavaScript 的演变,以及它是怎样改变我们编写代码的方式的.我们将从最早的 Web 开发开始,一直到现代异步模式.作为编程语言, JavaScript ...

  • ​不要在 JavaScript 中使用 If-Else 和 Switch,使用对象字面量

    不要在 JavaScript 中使用 If-Else 和 Switch,使用对象字面量 WEB前端开发社区 2021-07-17 在 JavaScript 中编写复杂的条件总是有可能创建一些非常混乱的 ...

  • 关于javascript中的promise的用法和注意事项

    一.promise描述 promise是javascript中标准的内置对象,用于表示一个异步操作的最终状态(是失败还是成功完成)及其结果值.它让你能够把异步操作最终成功或者失败的原因和响应的处理程序 ...

  • JavaScript中的AJAX

    XMLHttpRequest对象 IE7 ,FireFox,Chrome,Opera,Safari创建XHR对象 var xhr=new XMLHttpRequest(); 创建XHR对象的兼容性写法 ...

  • JavaScript中的函数

    概念 函数就是封装了一段可被重复调用执行的代码块. 函数的使用分为两步:声明函数和调用函数. 函数声明 function fn() { console.log("hi") } 注意 ...