<!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. 创建GitHub技术博客全攻略

    http://blog.csdn.net/renfufei/article/details/37725057 http://www.pchou.info/web-build/2014/07/04/bu ...

  2. Java中的一个类怎么调用另一个类中的方法

    如果另一个类中的那个方法是私有的话,就不能直接调用到,如果是其他类型的话看情况,如果是静态的(static)话,直接用类名可以调用到,如果是非静态的,就需要利用另一个类的实例(也就是用那个类生成的对象 ...

  3. 01.WAMP搭建 [Win7+Apache2.4+MySQL5.7+PHP7

    WAMP搭建[Win7+Apache2.4+MySQL5.7+PHP7 一.背景 将电脑光驱位拆换成固态硬盘(120g),专门装了一个系统用于工作.之前一直使用PHPstudy和WAMP这种集成环境, ...

  4. css长度值与颜色值

    颜色值 在网页中的颜色设置是非常重要的,有字体颜色,背景颜色,边框颜色等,设置颜色的方法也有很多种: 1.英文命令颜色 p{color:red;} 2.rgb颜色 p{color:rgb(133,45 ...

  5. C++ - 复制(copy) 和 虚复制(virtual copy) 的 区别

    复制(copy) 和 虚复制(virtual copy) 的 区别 本文地址: http://blog.csdn.net/caroline_wendy/article/details/16120397 ...

  6. Activity类生命周期

    Activity通常就是一个单独的屏幕.每一个活动都被实现为一个独立的类,并且从活动基类中继承而来,活动类将会显示由视图控件组成的用户接口,并对事件作出响应. 从开发者角度看,Activity是一个J ...

  7. java 动态代理示例，带主要注释

    Java proxy是基于反射,仅仅支持基于接口的动态代理. java 动态代理是一切架构的基础,必须了解. 废话少说,先上代码获得感性认识. 示例代码有主要注释. 接口: public interf ...

  8. 亚马逊云服务器VPS Amazon EC2 免费VPS主机配置CentOS及其它内容

    Amazon目前提供为期一年的免费VPS服务,可到地址http://aws.amazon.com 进行申请. 现在对账号申请成功后,对VPS主机配置CentOS的过程做个图文介绍 1.创建实例(Ins ...

  9. 如何把.cs文件编译成DLL文件

    开始--程序--Microsoft Visual Studio.NET 2013--Visual Studio.NET工具,点击其中的"VS2013 开发人员命令提示",就会进入M ...

  10. .NET跨平台实践：用C#开发Linux守护进程

    Linux守护进程(Daemon)是Linux的后台服务进程,它脱离了与控制终端的关联,直接由Linux init进程管理其生命周期,即使你关闭了控制台,daemon也能在后台正常工作. 一句话,为L ...