<!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. HTML与CSS基础知识补遗（一）

    开始从零基础系统地学习前端知识了,虽说html和css多少了解一些,但是学着还是能发现很多新大陆.... 一. HTML中head标签 1. <meta>标签: meta标签里是一些基础的 ...

  2. 基于OpenCv的人脸检测、识别系统学习制作笔记之三

    1.在windows下编写人脸检测.识别系统.目前已完成:可利用摄像头提取图像,并将人脸检测出来,未进行识别. 2.在linux下进行编译在windows环境下已经能运行的代码. 为此进行了linux ...

  3. JS变量和函数的一些理解

    今日看了下JS变量的一些文章,有些感触,把自己总结的一些写出来. JS初始化的过程1.JS解释器执行代码之前,创建全局变量2.用预定义的值和函数来初始化全局对象中的属性,3.搜索函数外的var声明,创 ...

  4. install openvpn and openvpn manager in ubuntu

    sudo apt-get install openvpn sudo apt-get install network-manager-openvpn

  5. JavaScript 基础第三天

    一.前言 在前天的内容我们提到了有关于JS的一些语言结构,这些语言结构都是语法中最为基本的内容必须予以熟记并可以灵活掌握. 二.引入 在今天内容中我们将讨论两个很重要的概念,数组与函数. 三.重点内容 ...

  6. 《理解 ES6》阅读整理：函数（Functions）（六）Purpose of Functions

    明确函数的双重作用(Clarifying the Dual Purpose of Functions) 在ES5及更早的ES版本中,函数调用时是否使用new会有不同的作用.当使用new时,函数内的th ...

  7. Apache HttpAsyncClient 如何设置per request timeout

    最近做一个项目时用到HttpAsyncClient:因项目所需,要求能对一个具体的request 设置连接和读写超时:但发现在HttpAsyncClient中,只有在创建一个HttpAsyncClie ...

  8. 收录.NET跨平台及跨数据库的博文...

    本帖,将持续收录.NET跨平台及跨数据库的博文... VS2012+EF6+Mysql配置心路历程: http://www.cnblogs.com/gameman/p/3773240.html ASP ...

  9. 在Ubuntu中安装Python3

    首先,通过命令行安装Python3.2,只需要在终端中通过命令行安装即可: sudo apt-get install python3   一路yes. 因为Ubuntu很多底层采用的是Python2. ...

  10. 【腾讯Bugly干货分享】深入理解 ButterKnife，让你的程序学会写代码

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/578753c0c9da73584b025875 0.引子 话说我们做程序员的,都 ...