cookie存储

cookie存储

基本介绍

(1)web存储相关的技术:cookie | sessionStorage | localStorage |应用缓存
(2)cookie是一种会话跟踪技术,用于在进行网页访问的时候,存储页面中的某些数据信息。

* cookie的使用注意点 *

    001 使用cookie来进行数据存储的大小有限制,4KB
    002 每个网页中存储cookie的个数(最多50)和每个网站中存储cookie的个数都有限制(200)
    003 各个不同的浏览器对cookie的数量也不相同

        IE6.0:每个域为20个,大小为4095个字节
        IE7.0/8.0:每个域为50个 ,大小为4095个字节
        Opera:每个域为30个 ,4096个字节
        FF:每个域为50个  ,大小为4097个字节
        Safari:没有个数限制,大小为4097个字节
        Chrome:每个域为53个,大小为4097个字节
        总结:在进行页面cookie操作的时候,应该尽量保证cookie个数小于20个,总大小 小于4KB

    004 cookie数据的过期时间

        1)默认情况下,cookie存储的内容是一次性的,它的有效期间是当前会话(需要把整个浏览器都关闭会话就结束)
        2)设置过期时间:通过expires=time;的格式来进行指定, 设置了之后只要没有超过过期时间,那么数据将一直都在

    005 cookie是不可以跨浏览器的(在IE中保存的cookie, 不可以在火狐中使用)

    006 cookie是不可以跨域的(跨域名)
        示例:127.0.0.1/code/test.html 和127.0.0.1/code/test1.html可以访问

        网络请求的常见路径:
            http://www.baidu.com:80/资源
            协议://域名.后缀:端口号/资源

        不能跨域的含义:就是只有 (协议+域名+后缀+端口)号都相同才能相互访问

            http://www.baidu.com:80/a.html
            http://www.baidu.com:80/b.html  能

            http://www.baidu.com:81/a.html
            http://www.baidu.com:80/b.html 不能(端口号不相同)

            http://mp3.baidu.com:80/a.html
            http://map.baidu.com:80/b.html 不能(二级域名不相同)

            https://www.baidu.com:80/a.html
            http://www.baidu.com:80/b.html 不能(协议不相同)

            http://www.bdu.com:80/a.html
            http://www.dbu.com:80/b.html 不能(以及域名不相同)

* cookie的设置和使用 *

 1)设置方法:
    设置cookie数据:document.cookie = "name=zhangsan";
    设置cookie数据和过期的时间:document.cookie = "name=zhangsan; expires="+date+";";
    过期7天的设置:var date = new Date(); // date.setDate(date.getDate() + 7);

2)使用注意:
    在设置cookie的时候,一次只能设置一个数据(一个键值对),不能进行批量设置
    错误的演示:window.cookie = "name=zhangsan&age=18";

示例代码

    //设置三个cookie的值,默认的过期时间是seesion(会话内)
    document.cookie = "name=wendingding";
    document.cookie = "age=18";
    document.cookie = "des=12345";

    //设置cookie的值,并指定过期的时间
    var date = new Date();
    date.setDate(date.getDate() + 3);   //3天的过期时间

    //注意:在设置过期时间的时候,中间使用;分隔开发
    document.cookie = "color=red;expires="+date;


    //删除cookie
    //删除cookie的原理:只要过期时间超过了当前的时间, 数据就会被删除
    date.setDate(date.getDate() + -1);
    document.cookie = "age=18; expires="+date+";";

cookie相关方法的封装

(1)读取某个cookie的值(需要做切割处理)
(2)添加cookie数据(需要判断是否要设置过期时间)
(3)删除cookie数据(利用过期时间和添加cookie的方法实现)

01 获取某个key对应的cookie值

    document.cookie = "name=zhangsan";
    document.cookie = "age=18";

    console.log(document.cookie);
    //01 获取某个key对应的cookie值
    function getCookie(key) {
        //01 先对获取的字符串进行切割,获取得到数组
        var arrM = document.cookie.split(";");
        console.log(arrM);
        //02 遍历数组
        for (var i = 0,len = arrM.length;i<len;i++)
        {
            //03 对数组中取出来的每个元素再进行切割
            var arrT = arrM[i].split("=");
            var res = arrT[0].replace(" ","");
            if(res == key)
            {
                return arrT[1];
            }
        }
    }

    console.log(getCookie("age"));

02 添加cookie和设置过期时间

  //添加单个cookie的值
    function addCookie(key,value,date) {
        //01 判断是否需要设置过期时间
        if (arguments.length == 2)
        {
            document.cookie = key + "=" + value;
        }else if (arguments.length == 3)
        {
            //02 设置过期时间
            var dateM = new Date();
            dateM.setDate(dateM.getDate() + date);
            var res = key + "=" + value +";" + "expires="+dateM;
            document.cookie = res;
        }
    }

    addCookie("haha","wuwuwuw",2);

03 删除cookie数据

    //删除cookie数据:原理(当前的时间超过了cookie的过期时间那么该数据就会被删除)
    function removeCookie(key){
        //重新设置某个cookie的过期时间
        addCookie(key,"",-1);
    }

    removeCookie("haha");
### 关于Cookie存储的实现方法 在Web开发中,Cookie是一种用于客户端状态管理的技术。通过设置HTTP响应头中的`Set-Cookie`字段,服务器可以向浏览器发送Cookie数据[^1]。以下是使用Python Flask框架来演示如何创建和读取Cookie的一个简单示例。 #### 创建并写入Cookie 下面是一个简单的Flask应用示例,展示如何将数据保存到用户的浏览器作为Cookie: ```python from flask import Flask, make_response, request app = Flask(__name__) @app.route('/setcookie') def set_cookie(): resp = make_response("Setting a cookie") # 设置名为 'username' 的 Cookie 值为 'JohnDoe' resp.set_cookie('username', 'JohnDoe', max_age=60*60*24) # 存储一天 return resp ``` 上述代码片段展示了如何利用Flask框架中的`make_response()`函数以及其关联的方法`set_cookie()`来定义一个新的Cookie,并将其有效时间设为一天[^2]。 #### 读取已存在的Cookie 当需要访问之前设定好的Cookie时,则可以通过请求对象获取它们: ```python @app.route('/getcookie') def get_cookie(): username = request.cookies.get('username') if username is None: return "No cookie found" else: return f"Welcome back {username}" ``` 此部分说明了怎样从用户端检索先前储存下来的特定名称下的信息——即这里的用户名字串["username"]^3]^. ### 注意事项 - Cookies应当谨慎对待敏感资料因为这些可能被轻易截获或者篡改除非采取额外的安全措施比如HTTPS传输加密机制. - 开发者应该考虑采用更安全的方式如Session Storage 或 LocalStorage 来替代传统Cookies处理某些类型的短期会话需求.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值