Cookie相当于本地储存(local Storage),也是一种储存信息的方式。

它通过

document.cookie ='name=value' //name  name值  value value值  

将name value 存入到

以上是我通过

document.cookie = 'weiboMsg=98567; path=/; expires=10';

写入到Cookie中。意思是  Name是 weiboMsg  Value是 98567 。

然后呢,我们也可以获取Cookie,通过

alert(document.cookie); //weiboMsg=98567
alert(typeof document.cookie); //string

但是我们会发现父级文件夹中无法调取子文件夹中的Cookie的值。

还有当我们关闭当前页面再次打开时,也无法读取Cookie的值。

在这里就会涉及到   path 路径  和  expires 时效

也就是以上两项,你可以ctrl+shift+j再找到

就可以随时观察Cookie的变化,以及它的默认值

比如 expires 中的 Session  ,它的时效是当前会话,也就是这个页面打开时。

这是我们就可以写两个方法来控制Cookie的传入与去除

在这里我们定义两个方法,分别是:setCookie() 与 getCookie();

代码如下

function setCookie(name, value, iDay) {
if(iDay) {
var dat = new Date(); dat.setDate(dat.getDate()+iDay); //name 传入的名称 value 传入的 值 path 默认路径(/)无需传入 expires 修改过期时间
document.cookie = '' + name + '=' + value + '; path=/; expires=' + dat + '';
} else {
document.cookie = '' + name + '=' + value + '; path=/';
}
}
function getCookie(name) {
//因为取来的Cookie信息是string,所以我们要将其拆分
var sValue = document.cookie.split('; ');
//["name=value", "name1=value"];
for(var i = 0; i < sValue.length; i++) { var arr1 = sValue[i].split('=');
//分割为 ["name", "value"],["name1", "value"]
console.log(arr1);
if(arr1[0] == name) {
return arr1[1];
}
}
return '';
}

通过对字符串与数组的操作,获取Cookie中name的值。这里应注意以下在第一次split分割时的字符是 ;+空格

另外,我们也可以设置删除Cookie,我将其命名为delCookie

function delCookie(name) {
setCookie(name, 'ssss', -10)
}

原理就是将时效设为负值,浏览器就会将Cookie种的信息删除

Cookie的作用以及封装的方法的更多相关文章

  1. Jquery.cookie.js 源码和使用方法

    jquery.cookie.js源码和使用方法 jQuery操作cookie的插件,大概的使用方法如下 $.cookie(‘the_cookie’); //读取Cookie值$.cookie(’the ...

  2. js封装的方法

    1.JS封装就是尽量把使用的方式简单化,内部逻辑和使用解耦.通俗的说就是使用的时候只需要知道参数和返回值,其他条件尽量不要使用人员进行设置. 2.JS封装的方法有函数方式.对象的方式.闭包的方式. 举 ...

  3. Visual Studio快速封装字段方法

    在面向对象的编程中我们常常要将各个字段封装为属性,但是当字段多的时候往往这个重复的操作会大大降低我们的开发效率,那么如何才能快速的封装字段呢?下面就给大家2个解决方法: 1.使用封装字段方法: 选中字 ...

  4. 关于tween.js 封装的方法

    今天做的是匀速情况下div的运动.首先开始之前先了解运动的原理 A------------>>BA移动到B 这段距离是总距离 用一个变量保存下来:var dA移动到B 移动的总次数  用一 ...

  5. xml方式封装数据方法

    1.xml方式封装数据方法 2.demo <?php xml方式封装数据方法 /** * [xmlEncode description] * @param [type] $code [descr ...

  6. jQuery之JSP加载JS文件不起作用的有效解决方法

    JSP加载JS文件不起作用的有效解决方法 作者: 字体:[增加 减小] 类型:转载 时间:2014-04-08 jsp导入jquery文件,老是不起作用,原因在于其不能访问/WEB-INF/目录下的文 ...

  7. Kong管理UI -kong-dashboard (附kong封装webservice方法)

    本文仍然是在centos 6.7的环境下进行                 本文转载请注明出处 —— xiaoEight btw如果要正常使用管理UI,前提为kong已经正常run(可参考)起来,此 ...

  8. angular 封装公共方法

    angular封装公共方法到service中间件,节省开发时间 layer.service.ts openAlert(callback) {// 传递回调函数 const dialogRef = th ...

  9. jsonp跨域 封装通用方法

    jsonp跨域 封装通用方法 //用法如下 jsonp({ url:"https://www.xxxx.com", params:{wd:'b'}, callback:'show' ...

随机推荐

  1. 【原创】bootstrap框架的学习 第六课[bootstrap代码]

    Bootstrap 允许您以两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种是 <pre> 标 ...

  2. Git操作指南

    请访问以下网址,很详细,今天偷个懒记录一下,之后有时间再来补全吧! https://git-scm.com/book/zh/v2

  3. (知识点)JavaScript继承

    1)原型链 ①原型链示例 function Shape() { this.name = 'shape'; this.toString = function(){ return this.name; } ...

  4. API 管理工具

    API 管理工具 你还苦于无法有效的管理大量的API吗?今天给大家介绍一款API的管理工具.这款工具可以免费使用,虽然中途可能会提示你购买,但并不影响我们的使用. 下载地址: Windows:http ...

  5. Supervisor: A Process Control System

    Supervisor: 进程控制系统 概述:Supervisor是一个 Client/Server模式的系统,允许用户在类unix操作系统上监视和控制多个进程,或者可以说是多个程序. 它与launch ...

  6. Angular简易分页设计(二):封装成指令

    (首先声明本文来自博客园本人原创,转载请说明出处.欢迎关注:http://www.cnblogs.com/mazhaokeng/) 之前我们讲过,Angular分页代码确实不难实现,但是由于在多个路由 ...

  7. 为RecyclerView的item之间设置相同的间距

    项目中经常碰到列表当中的每一项之间需要设置间距的问题,我们可以通过给列表中的每一项设置margin值来实现,例如纵向的间距可以给每一项设置right_margin,这种方法下,整个列表的最左边会紧贴屏 ...

  8. spark2.0系列《一》—— RDD VS. DataFrame VS. DataSet

    虽说,spark我也不陌生,之前一直用python跑的spark,基本的core和SQL操作用的也是比较熟练.但是这一切的基础都是在RDD上进行操作,即使是进行SQL操作也是将利用SpaekConte ...

  9. matlab笔记(1) 元胞结构cell2mat和num2cell

    摘自于:https://zhidao.baidu.com/question/1987862234171281467.html https://www.zybang.com/question/dcb09 ...

  10. React Native技术做的一个项目“微笑阅读”

    最近用React Native做了一个APP应用,有点心得: React Native确实比Hybrid应用渲染快,响应快,用户体验更好: React Native比原生简单多了,会Js就可以了,开发 ...