原文链接：http://blog.csdn.net/qq_37936542/article/details/79076128
需求：用户登录成功之后记录用户名和密码，下一次打开登录页面直接填充
一：引入js文件
jquery.min.js下载地址：点击打开链接
jquery.cookie.js下载地址：点击打开链接
- <script src="jQuery.min.js" type="text/javascript"></script>
- <script src="jquery.cookie.js" type="text/javascript"></script>
注意：cookie.js文件依赖jquery.min.js 所以先引入jquery.min.js
二：$.cookie使用
- <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
- <script type="text/javascript" src="js/jquery.cookie.js"></script>
- <body>
- <h1>$.cookie测试</h1>
- </body>
- <script type="text/javascript">
- //将userName保存到cookie
- $.cookie('userName', '张三');
- //保存到cookie并设置有效时间为30天:
- $.cookie('userName', '张三', { expires: 30 });
- //保存到cookie并设置cookie的有效时间和有效路径：
- $.cookie('userName', '张三', { expires: 30, path: '/' });
- //销毁名称为userName的cookie
- $.cookie('userName', null);
- </script>
三：$.cookie语法介绍
语法：$.cookie(名称,值,[option])
(1)读取cookie值
$.cookie(cookieName) cookieName:要读取的cookie名称。
示例：$.cookie("username"); 读取保存在cookie中名为的username的值。
(2)写入设置Cookie值：
$.cookie(cookieName,cookieValue); cookieName:要设置的cookie名称，cookieValue表示相对应的值。
示例:$.cookie("username","admin"); 将值"admin"写入cookie名为username的cookie中。
(3)销毁cookie
$.cookie("username",NULL); 销毁名称为username的cookie
(4) [option]参数说明：
expires: 有限日期，可以是一个整数或一个日期(单位：天)。 这个地方也要注意，如果不设置这个东西，浏览器关闭之后此cookie就失效了
path: cookie值保存的路径，默认与创建页路径一致。
domin: cookie域名属性，默认与创建页域名一样。 这个地方要相当注意，跨域的概念，如果要主域名二级域名有效则要设置 ".xxx.com"
secrue: 一个布尔值，表示传输cookie值时，是否需要一个安全协议。
四：$.cookie保存对象
cookie本质上是一个txt文本，因此只能够存入字符串，如果要保存对象，需要序列化之后才能存入cookie，而取的时候要反序列才又能得到对象。
示例：
- $(function () {
- if ($.cookie("o") == null) {
- var o = { name: "张三", age: 24 };
- var str = JSON.stringify(o); //对序列化成字符串然后存入cookie
- $.cookie("o", str, {
- expires:7 //设置时间，如果此处留空，则浏览器关闭此cookie就失效。
- });
- alert("cookie为空");
- }
- else {
- var str1 = $.cookie("o");
- var o1 = JSON.parse(str1); //字符反序列化成对象
- alert(o1.name); //输反序列化出来的对象的姓名值
- }
- })
文末福利：
福利一：前端，Java，产品经理，微信小程序，Python等8G资源合集大放送：https://www.jianshu.com/p/e8197d4d9880
福利二：微信小程序入门与实战全套详细视频教程
领取方式：
如果需要学习视频，欢迎关注 【编程微刊】微信公众号，回复【领取资源】一键领取以下所有干货资源，获取更多有用技术干货、文档资料。所有文档会持续更新，欢迎关注一起成长！