前言

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也是修改cookiesetCookie("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) {//将 键、值、和过期时间  写入documentdocument.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);//将 键、值、和过期时间  写入documentdocument.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);
}

js 原生cookie封装相关推荐

Ajax工作原理和原生JS的ajax封装
前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...
原生JS设置cookie、读取cookie、删除cookie
JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的. 而cookie是运行在客户端的,所以可以用JS来设置cookie. 假设有这样一 ...
java原生封装_[Java教程]原生AJAX封装
[Java教程]原生AJAX封装 0 2016-07-12 13:00:08 回归下原生js,网上看到的AJAX封装,遂拿来改改,不知还有何弊端,望指出!1 var ajaxHelper = { 2 ...
jquery.cookie 使用文档，$.cookie() 文档教程， js 操作 cookie 教程文档。
jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档. jquery.cookie中的操作: jquery.cookie.js是一个基于jquer ...
api怎么写_使用Node.js原生API写一个web服务器
Node.js是JavaScript基础上发展起来的语言,所以前端开发者应该天生就会一点.一般我们会用它来做CLI工具或者Web服务器,做Web服务器也有很多成熟的框架,比如Express和Koa.但 ...
【转】第7篇：Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告：全自动注册与反射方法分析...
作者: 牛A与牛C之间时间: 2013-12-12 分类: 技术文章 | 2条评论 | 编辑文章主页 » 技术文章 » 第7篇:Xilium CefGlue 关于 CLR Object 与 JS ...
JS原生Ajax和jQuery的Ajax与代码示例
JS原生Ajax和jQuery的Ajax [学习目标] 1,了解JS原生Ajax原理 2,掌握json数据格式掌握json数据格式方式掌握json的解析方式 3,掌握jQuery中的Ajax封装 ...
封装原声ajax,原生AJAX封装的简单实现
回归下原生js,网上看到的AJAX封装,遂拿来改改,不知还有何弊端,望指出! var ajaxHelper = { /*1.0 浏览器兼容的方式创建异步对象*/ makeXHR: function ( ...
【加强版】js原生实现拖拽效果，这次没有用document的mousedown、mousemove、mouseup事件我们来点实际的（但是有个弊端：拖拽过程中鼠标会变成一个禁用符号，不太友好）
<div class='dragged'></div> //初始化需要拖拽的列initDrags() {var arr = document.querySelectorAll( ...

js 原生cookie封装

文章目录

前言