博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript中cookie使用
阅读量:5972 次
发布时间:2019-06-19

本文共 2147 字,大约阅读时间需要 7 分钟。

转自:

 

一、什么是 cookie?

cookie 就是页面用来保存信息,比如自动登录、记住用户名等等。

 

二、cookie 的特点

  1. 同个网站中所有的页面共享一套 cookie;
  2. cookie 有数量、大小限制;
  3. cookie 有过期时间。

 

三、如何使用 cookie?

通过 document.cookie 来写入 cookie

    
cookie基础

打开浏览器查看 cookie,可以发现新定义的 cookie 并不会将原来的覆盖。

如果没有设置过期时间,那么关闭浏览器就会清空 cookie。如何设置过期时间呢?答案是:expires。一般我们会结合 Date 对象来使用。

var d = new Date();d.setTime(d.getTime() + 1 * 3600 * 1000);document.cookie = 'username=abc; expires=' + d.toGMTString();

我们可以通过火狐浏览器看到,username 的过期时间是当前时间的 1 小时后。

 

最后对获取 cookie 的方法进行封装:

function setCookie(name,value,hours){      var d = new Date();    d.setTime(d.getTime() + hours * 3600 * 1000);    document.cookie = name + '=' + value + '; expires=' + d.toGMTString();}

 

学会了如何设置 cookie,那么该如何读取 cookie 呢?

首先我们看下 cookie 里的内容是什么类型?

document.cookie = 'username=abc';document.cookie = 'password=123';document.cookie = 'email=abcdef@123.com';typeof document.cookie;    //stringalert(document.cookie);    //'username=abc; password=123; email=abcdef@123.com'

得到的是一串字符串,需要注意的是,每个 ; 后面都有个空格。

那么我们如何取到具体的数值呢?附上代码:

function getCookie(name){      var arr = document.cookie.split('; ');    for(var i = 0; i < arr.length; i++){        var temp = arr[i].split('=');        if(temp[0] == name){            return temp[1];        }    }    return '';}

除了设置、获取 cookie,我们还可以删除 cookie。我们在网上经常看到有清除用户名这样的功能,其实就是用到了清除 cookie。

清除 cookie 其实很简单,只要使过期时间为过去时间就可以了。

function removeCookie(name){    var d = new Date();    d.setTime(d.getTime() - 10000);    document.cookie = name + '=1; expires=' + d.toGMTString();}

 

最后我们将设置、获取、清除 cookie 封装成一个 cookie.js

function setCookie(name,value,hours){      var d = new Date();    d.setTime(d.getTime() + hours * 3600 * 1000);    document.cookie = name + '=' + value + '; expires=' + d.toGMTString();}function getCookie(name){      var arr = document.cookie.split('; ');    for(var i = 0; i < arr.length; i++){        var temp = arr[i].split('=');        if(temp[0] == name){            return temp[1];        }    }    return '';}function removeCookie(name){    var d = new Date();    d.setTime(d.getTime() - 10000);    document.cookie = name + '=1; expires=' + d.toGMTString();}

 

转载于:https://www.cnblogs.com/lvmylife/p/5455779.html

你可能感兴趣的文章
poj2728 Desert King --- 01分数规划 二分水果。。
查看>>
iOS边练边学--介绍布局的三种方法
查看>>
[React] React Router: Nested Routes
查看>>
android: 播放视频
查看>>
超级 App 手机百度云端架构设计与个性化推荐
查看>>
携程对AIOps场景和算法的探索与实践
查看>>
Cable:360实现的新虚拟网络架构
查看>>
Visual Studio推出改进的C/C++支持
查看>>
为什么选择PostgreSQL而不是MySQL
查看>>
创建快乐的工作环境
查看>>
解读:Java 11中的模块感知服务加载器
查看>>
GitLab Web IDE正式发布10.7版本并开源
查看>>
Alluxio在多级分布式缓存系统中的应用
查看>>
依赖类型语言Idris发布1.0版本
查看>>
秒杀业务架构优化之路
查看>>
简析Uber的可伸缩监控:uMonitor和Neris
查看>>
Roman to Integer
查看>>
Stimulsoft报表控件 v2016.1版本全线更新【附下载】
查看>>
[LintCode] Count 1 in Binary [典型位运算题目]
查看>>
微信公众平台JSSDK分享接口开发(PHP实现)
查看>>