二十七、cookie存储

最新推荐文章于 2024-09-03 19:08:52 发布

℡想定下来

最新推荐文章于 2024-09-03 19:08:52 发布

阅读量1k

点赞数

文章标签： cookie javascript

本文链接：https://blog.csdn.net/weixin_45256247/article/details/107720157

版权

概念

cookie:
cookie是计算机中的一门技术，主要通过该技术存储网站数据，从而减轻后端压力，加快网站访问速度。
存储在客户端浏览器中（不同浏览器不能共享）
特性：

时间限制（默认浏览器关闭销毁，自定义时间）
域的限制（浏览器同源策略）
空间限制，cookie只能存储4kb
数量限制，每个域下最多不能超过50个cookie
存储数据类型限制，cookie只能存储字符串（思考：人/商品信息都是对象怎么存，回答：转化为其他类型）

好处：减轻服务器压力，因为将数据存储到客户端了就不需要去服务端获取

特点总结：

时间限制默认浏览器关闭销毁（存储在浏览器文件中）
域名限制不能跨浏览器获取（同源策略）
空间限制 4KB
数量限制浏览器不同限制不同
类型限制只能存储字符串

COOKIE使用

1、语法

设置：
document.cookie = 'key1=值1;expires=时间;path=路径;domain=域'
.....
document.cookie = 'keyn=值1;expires=时间;path=路径;domain=域;'

 --------------------------------------------------------------------------------------------------
var d = new Date();     //设置日期对象
d.setTime(d.getTime() + 3600*1000  *24 * 7);   //设置时间戳
d.toUTCString()    //将时间对象转为字符串

 --------------------------------------------------------------------------------------------------
获取：document.cookie
删除：将过期时间设置为负值

注意：

// 1. 多个参数之间分号隔开

// 2. 键相同后者覆盖前者

// 3. 默认浏览器关闭销毁

// 4. 必须走http协议（live server 5500），不能本地路径

练习

存储人的信息并打印
验证：会过期，设置时间1天后过期
验证：域名限制
验证：存储类型限制

<script>
    // 设置1：document.cookie = '键1=值1;expires=时间;path=/;domain=当前网址'
    //....
    // 设置n：document.cookie = '键1=值1;;expires=时间'
    
    // 注意点：
    // 1. 多个参数之间分号隔开
    // 2. 键相同后者覆盖前者
    // 3. 默认浏览器关闭销毁
    // 4. 必须走http协议（live server），不能本地路径
    
    // - 练习：存储人的信息并打印   name, age
    // - 验证：会过期，设置时间10秒钟后过期
    // - 验证：域名限制    a网址设置，b网址不能获取    浏览器同源策略
    // - 验证：存储类型限制
    
    const d = new Date // 创建日期对象
    d.setTime( d.getTime() + 1000*10)  // 设置了10秒钟的存储时间
    const time = d.toUTCString() //日期对象转化为字符串
    let obj = {name: '神龙教主', age: 18}    //定义一个对象验证类型限制
    
    document.cookie = `name=张三;expires=${time}`//字符串可输出
    document.cookie = `age=18;expires=${time}`   //字符串可输出
   document.cookie = `obj=${obj};expires=${time}`//对象不可输出
    // name=张三; age=18
    console.log(document.cookie)  // 字符串
    </script>

执行结果：
在这里插入图片描述
小总结
document.cookie = ‘键1=值1;expires=时间’ path/domain
…
const d = new Date
d.setTime( d.getTime() + 11000606024 或 3600100024 )
const time = d.toUTCString() // 获取世界统一时间字符串格式

留心1：对象不能直接存需要转换
留心2：键重复会覆盖
留心3：必须走HTTP协议

取：document.cookie 字符串需要具体值得自己分割取

删：document.cookie = ‘待删除的键=值;expires=-1’

封装
发现：存cookie麻烦（时间等）、取cookie更麻烦（得自己操作字符串）

解决：封装成函数

封装：setcookie（key, value, time）、getcookie（key）、removecookie(key) 三个方法

function setcookie(key, value, time = 1) 
{
    const d = new Date
    d.setTime( d.getTime() + 3600*1000*24*time )
    time = d.toUTCString()
    document.cookie = `${key}=${value};expires=${time}`
}

function getcookie(key)
{
    // document.cookie 
    // 键1=值1; 键2=值2; ....   脚下留心：键前面，分号后面 有空格的 所以下面要去空格

    // 1. 将字符串cookie 变成 数组
    let cookieArr = document.cookie.split(';') // ['键1=值1', '键2=值2']
    // 2. 通过for循环遍历判断传进来的键
    for (let i =0; i<cookieArr.length; i++)
    {
        // i 最大下标 1
        // cookieArr[i]   键1=值1、键2=值2
        let tmpArr =cookieArr[i].split('=') // [键1, 值1]
        // 获取键           tmpArr[0]
        // 获取键对应的值    tmpArr[1]
        // 思考：document.cookie键会不会重复
        // 回答：不会，因为重复就覆盖，所以匹配到了直接break
        // if (tmpArr[0] == key)
        // 脚下留心：tmpArr[0]前面有空格
        let tmpKey = tmpArr[0].replace(/\s/g, '')
        if (tmpKey == key)
        {
            return tmpArr[1];
        }
    }

    return '';
}


function removecookie(key)
{
    // 因为是负数  所以设置的时候 -1天 就是删
    setcookie(key, 1, -1)
}

案例练习

1、一周内免登陆
需求：创建login.html和member.html页面，登录时可以记住密码。

login.html 表单，当你提交登录发送异步请求有问题-提示，没问题-1保存用户信息，2跳转会员中心
member.html 判断用户是否登录登录了-不管、没登录-跳转到登录页界面

分析：

1、定义接口，参数用户名检测数据库用户是否存在响应json数据

2、显示登录页 form表单

3、表单提交请求接口检测用户是否存在：不存在-弹框提示，存在-提示登录成功（1-存cookie，2-跳转）

4、会员中心判断是否登录 cookie：1-有不管，2-没有跳转到登录页

登陆接口checkUser.php
在这里插入图片描述

<?php
// 1. 接受数据
$uname = @$_REQUEST['uname'];
$pwd = @$_REQUEST['pwd'];
if (!$uname || !$pwd) response(400, '参数有误');

// 2. 操作数据库
$pdo = new PDO('mysql:dbname=h5', 'root', 'root');
$pdoStatement = $pdo->query("select * from question where title = '{$uname}'");
$data = $pdoStatement->fetch(PDO::FETCH_ASSOC);

// var_dump($data);die;   有数据 - 数组 ， 没有数据 - false

    // 2.1 判断用户是否存在 
    if (!$data) response(400, '用户名或密码错误');
    // 2.2 判断密码是否正确
    if ($data['content'] != $pwd) response(401, '用户名或密码错误');

// 3. 响应数据
response(200, '登录成功');


function response($state, $msg, $data = null)
{
    echo json_encode([
        "meta" => [
            "state" => $state,
            "msg" => $msg
        ],
        "data" => $data
    ]);

    die; // 终止代码执行
}