js 原生cookie封装

陌生人~

已于 2022-05-28 10:39:09 修改

阅读量625

点赞数

分类专栏： # 前段杂记文章标签： javascript 前端开发语言

于 2022-05-28 09:39:05 首次发布

本文链接：https://blog.csdn.net/weixin_47790139/article/details/125014348

版权

前段杂记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

前言
原生cookie的使用
cookie封装
- cookie简单使用
- cookie封装工具类

前言

Cookie 是一个保存在客户机中的简单的文本文件, 这个文件与特定的 Web 文档关联在一起, 保存了该客户机访问这个Web 文档时的信息, 当客户机再次访问这个 Web 文档时这些信息可供该文档使用。由于“Cookie”具有可以保存在客户机上的神奇特性, 因此它可以帮助我们实现记录用户个人信息的功能。

举例来说, 一个 Web 站点可能会为每一个访问者产生一个唯一的ID, 然后以 Cookie 文件的形式保存在每个用户的机器上。如果使用浏览器访问 Web, 会看到所有保存在硬盘上的 Cookie。在这个文件夹里每一个文件都是一个由“名/值”对组成的文本文件,另外还有一个文件保存有所有对应的 Web 站点的信息。在这里的每个 Cookie 文件都是一个简单而又普通的文本文件。透过文件名, 就可以看到是哪个 Web 站点在机器上放置了Cookie(当然站点信息在文件里也有保存)

Cookie是一段不超过4KB的小型文本数据，由一个名称（Name）、一个值（Value）和其它几个用于控制Cookie有效期、安全性、使用范围的可选属性组成这里不讨论安全性和适用范围

原生cookie的使用

cookie存储

document.cookie = "name=111";

cookie获取

//存储cookies
document.cookie = "name=111";
//获取cookies
var cookies = document.cookie;
console.log(cookies);

cookie修改

//存储cookies
document.cookie = "name=111";
//覆盖cookies
document.cookie = "name=222";
//获取cookies
var cookies = document.cookie;
console.log(cookies);

cookie删除

//存储cookies
document.cookie = "username=zhangsan";
//删除cookie，您需要设置expires参数为以前的时间即可，如 Thu, 01 Jan 1970 00:00:00 GMT:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
//获取cookies
var cookies = document.cookie;
console.log(cookies);

cookie封装

cookie简单使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/myCookie.js"></script>
</head>
<body>

</body>
<script>
    setCookie("name","111",10000);
    setCookie("name","222",10000);//存cookie也是修改cookie
    setCookie("pass","333");
    getCookie("name");
    console.log( getCookie("name"));
    remCookie("name")
</script>
</html>

cookie封装工具类

即拿即用
setCookie(key,value) 存储cookie 无过期时间（手动删除）
setCookie(key,value，exdays) 存储cookie 有过期时间（手动设置）
getCookie(key) 获取cookie
remCookie(key) 删除cookie

myCookies.js

/**
 * Cookie值设置函数  无过期时间(需要手动删除)
 * @param cname     key名称
 * @param cvalue    value值
 */
function setCookie(key, value) {
    //将 键、值、和过期时间  写入document
    document.cookie = key + '=' + value;
}

/**
 * Cookie值设置函数
 * @param cname     key名称
 * @param cvalue    value值
 * @param exdays    过期时间
 */
function setCookie(key, value, exdays) {
    let date_ = new Date();
    //设置时间为 当前时间+过期时间
    date_.setDate(date_.getDate() + exdays);
    //将 键、值、和过期时间  写入document
    document.cookie = key + '=' + value + ';expires=' + date_;
}
/**
 * Cookie值设置函数
 * @param cname     key名称
 * @param cvalue    value值
 * @param exdays    过期天数
 */
/*function setCookie(key, value, exdays) {
    let d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = key + "=" + value + "; " + expires;
}*/

/**
 * Cookie值获取函数
 * @param key     key名称
 * return         返回key对应的value值
 */
function getCookie(key) {
    // 多个cookie通过;分割为多个由'键=值'组成的数组
    var array = document.cookie.split(';');
    //console.log(array);
    //通过for循环遍历数组 得到每个 键=值
    for (var i = 0; i < array.length; i++) {
        //把 键=值 中间的=去掉  得到的新数组 只有 键和值 组成
        var new_Array = array[i].split('=');
        // 多个cookie存值的时候  会存在某个cookie的值名前面有空格 去除
        var n_key = new_Array[0].replace(/^\s/, '');
        if (n_key == key) {
            //console.log(new_Array[0], new_Array[1]);
            return new_Array[1];
        }
    }
    return '';
}

/**
 * Cookie值删除函数
 * @param key     key名称
 */
function remCookie(key) {
    //value可以设置为空字符串 在这里不起作用
    this.setCookie('name', '', -1);
}

陌生人~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 原生cookie封装

文章目录原生cookie的使用cookie存储cookie获取cookie修改cookie删除cookie封装cookie简单使用cookie封装工具类原生cookie的使用cookie存储document.cookie = "name=111";cookie获取//存储cookiesdocument.cookie = "name=111";//获取cookiesvar cookies = document.cookie;console.log(cookies);cookie修改/
复制链接

扫一扫

专栏目录