<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<body>

  用户名：<input type="text" name="user" id="user">

  年龄：<input type="text" name="age" id="age">

  <input type="button" name="" value="提交" id="btn">

</body>

</html>

　　

JS代码

<script type="text/javascript">

  // 设置cookie

  function setCookie(){

    // 获取当前时间

    var date = new Date();

    // 支持传一个json {name:value}

    var a = arguments;

    if(a.length==2){

      // 设置过期时间 = 当前时间 + 过期时间；

      date.setDate(date.getDate()+a[1]);

      for(k in a[0]){

        document.cookie = k +"="+ encodeURI(a[0][k]) +";expires=" + date.toGMTString()+";path=/";

      }

    }else{

      date.setDate(date.getDate()+a[2]);

      // 设置cookie = 值=value  encodeURI(把值进行编码) expires设置过期时间 path设置网站目录访问cookie权限，/表示当前域名下的所有目录都可以访问这个cookie

      document.cookie = a[0] +"="+ encodeURI(a[1]) +";expires=" + date.toGMTString()+";path=/";

    }

  }

  // 读取cookie

  function readCookie(name){

    // 获取cookie decodeURI把cookie进行解码

    var cookie = decodeURI(document.cookie);

    // 获取当前名称的起始索引

    var start = cookie.indexOf(name+'=');

    // 如果找不到这个名称的话就直接返回；

    if(start==-1)return '';

    // 获取结束索引，start表示开始查找的起点

    var end = cookie.indexOf(';',start);

    // 如果返回-1说明是最后一条数据

    if(end==-1){

      // 最后一条直接截取到末尾

      return cookie.substring(start+name.length+1);

    }

    // 如果不是末尾的话截取到;

    return cookie.substring(start+name.length+1,end);

  }

  // 删除cookie

  function removeCookie(name){

    document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/";

  }

  // 写入cookie

  var oBtn = document.getElementById('btn');

  oBtn.onclick = function(){

    var user = document.getElementById('user').value;

    var age = document.getElementById('age').value;

    // 设置cookie

    setCookie({

      'user':user,

      'age':age

    },10);

  };

  // 打印cookie

  console.log(readCookie('user'));

</script>

　　

使用方法：

　　设置cookie：setCookie()支持传递2个或3个参数 json&&time || nam&&value&&time              json:{name:value},time:多久过期

　　读取cookie：readCookie(要读取的cookie名称)

　　删除cookie：removeCookie(要删除的cookie名称)

　　

以上也是闲来无事写的，仅供参考，如果有不懂的可以在下方留言，如果多人需要帮助的话我再另外开一片文章专门讲。

javscript对cookie的操作，以及封装的更多相关文章

  1. java对cookie的操作

    java对cookie的操作比较简单,主要介绍下建立cookie和读取cookie,以及如何设定cookie的生命周期和cookie的路径问题. 建立一个无生命周期的cookie,即随着浏览器的关闭即 ...

  2. Asp.Net Core 2.0 项目实战（4）ADO.NET操作数据库封装、 EF Core操作及实例

    Asp.Net Core 2.0 项目实战(1) NCMVC开源下载了 Asp.Net Core 2.0 项目实战(2)NCMVC一个基于Net Core2.0搭建的角色权限管理开发框架 Asp.Ne ...

  3. 原生js--cookie操作的封装

    封装cookie的操作:查询cookie个数.查询所有cookie的键.获取cookie.设置cookie.删除cookie.清除全部cookie /** * cookieStorage */func ...

  4. js 第四章 cookie的操作

    js 第四章 cookie的操作 一.学习要点 掌握cookie的简单应用 二. js 第四章 cookie的操作 了解cookie 什么是cookie? cookie 是存储于访问者的计算机中的变量 ...

  5. jquery.cookie.js 操作cookie实现记住密码功能的实现代码

    jquery.cookie.js操作cookie实现记住密码功能,很简单很强大,喜欢的朋友可以参考下.   复制代码代码如下: //初始化页面时验证是否记住了密码 $(document).ready( ...

  6. Jquery对Cookie的操作

    第一步:先引用jQuery的插件jquery-1.9.1.min.js 第二步:引用jquery.cookie.js插件 下对cookie的操作: $.cookie("cookieName& ...

  7. PHP中对数据库操作的封装

    在动态网面设计中很多都要涉及到对数据库的操作,但是有时跟据需要而改用其它后台数据库,就需要大量修改程序.这是一件枯燥.费时而且容易出错的功作.其实我们可以用PHP中的类来实现对数据库操作的封装,从而使 ...

  8. c#读写共享内存操作函数封装

    原文 c#读写共享内存操作函数封装 c#共享内存操作相对c++共享内存操作来说原理是一样,但是c#会显得有点复杂. 现把昨天封装的读写共享内存封装的函数记录下来,一方面希望给需要这块的有点帮助,另一方 ...

  9. C# .NET更智能的数据库操作的封装

    前述: 对数据库操作的封装,相信网络上已经有一大堆,ORM框架,或者是.NET本身的EF,都很好的支持数据库操作.这篇文章是分享自己所思考的,对数据库操作的简单封装.我对于这篇文章,认为被浏览者所关注 ...

随机推荐

  1. js在head里插入style样式

    代码如下: var nod = document.createElement('style'), str = 'body{background:#000;color:#fff} a{color:#ff ...

  2. enum与字符串转换

    public enum CacheControlMode { DisableCache, UseExpires } string s = CacheControlMode.UseExpires.ToS ...

  3. 『TCP/IP详解——卷一：协议』读书笔记——17

    2013-08-27 15:37:42 6.5 ICMP端口不可达差错 端口不可达报文是ICMP差错报文的一种,它是ICMP不可达报文中的一种,以此来看一看ICMP差错报文中所附加的信息.使用UDP来 ...

  4. c#.net中参数修饰符ref,out ,params解析

    params ============================================================================================= ...

  5. PHP, LDAPS and Apache

    要PHP可以连接到用self-signed certificate的ldaps服务器,需要在/etc/ldap.conf中添加一行: TLS_REQCERT     never 要PHP在Apache ...

  6. day11---异步IO\数据库\队列\缓存

    一.RabbitMQ队列 RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统.他遵循Mozilla Public License开源协议. MQ全称为Message Queue, 消息 ...

  7. poj 1195 - Mobile phones(树状数组)

    二维的树状数组,,, 记得矩阵的求和运算要想好在写.... 代码如下: #include <cstdio> #include <cstdlib> #include <cm ...

  8. distinct order by 排序问题

    使用类似“SELECT DISTINCT `col` FROM `tb_name` ORDER BY `time` DESC”这样的sql语句时,会遇到排序问题. 以上面的sql语句分析:order ...

  9. Replication的犄角旮旯（八）-- 订阅与发布异构的问题

    <Replication的犄角旮旯>系列导读 Replication的犄角旮旯(一)--变更订阅端表名的应用场景 Replication的犄角旮旯(二)--寻找订阅端丢失的记录 Repli ...

  10. MySql如何编写高效的SQL

    最近应团队要求,研究整理了下,mysql相关的优化,有些是根据实际java项目中碰到的情况经验之谈.欢迎讨论~ SQL 语言是一种强大而且灵活的语言,在使用 SQL 语言来执行某个关系查询的时候,用户 ...