angular中的cookie读写方法


Posted in Javascript onAugust 02, 2017

AngularJS中对cookie的操作封装了一个单独的模块,模块名为ngCookies,若想使用需在页面中先引入angular-cookies.js:

<script src="js/angular.min.js"></script>
<script src="js/angular-cookies.js"></script>

然后??gCookies模块注入到我们自定义的模块的依赖模块中:

var app = angular.module("myApp",['ngCookies']);

ngCookies模块中有两个cookies读写相关的服务:$cookies和$cookieStroe。无论使用哪种都要先将其注入到控制器中,为了比较二者的区别,都将其注入到控制器中:

app.controller('namesCtrl', ['$cookies','$cookieStore',function($cookies, $cookieStore){}]);

设置cookie用put()方法:

$cookies.put(key, value[, options]);
$cookieStore.put(key, value);

例如设置一个cookie,名为“userName”,值为“yangmin”:

//使用$cookies设置cookie
$cookies.put('userName', 'yangmin');
//使用$cookieStore设置cookie
$cookieStore.put('userName','yangmin');

获取cookie用get()方法:

$cookies.get(key);
$cookieStore.get(key);

例如获取上面设置的“userName”:

$cookies.get(userName);//yangmin
$cookieStore.get("userName"); //yangmin

删除cookie用remove():

$cookies.remove(key[, options]);
$cookieStore.remove(key);

例如删除“userName”

$cookies.remove("userName");
$cookieStore.remove("userName");

$cookies和$cookieStore的区别:

1.$cookies设置的cookie值一般为字符串,$cookieStroe可用于设置字符串、对象、数组等。

$cookies.put("person",{name:"Amy",age:23});
var person = $cookies.get("person");
console.log(person.age);//undefined
$cookieStore.put("person",{name:"Amy",age:23});
var person = $cookieStore.get("person");
console.log(person.age);//23

2.$cookies可设置参数,例如可设置cookie的过期时间。$cookieStore无法设置参数

var expireDate = new Date();
expireDate.setDate(expireDate.getDate() + 1);
$cookies.put("userName",“yangmin”,{'expires': expireDate});//“userName”一天后过期

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
javascript日期计算实例分析
Jun 29 Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
vue + vuex todolist的实现示例代码
Mar 09 Javascript
JS实现数组的增删改查操作示例
Aug 29 Javascript
在vue项目中引入vue-beauty操作方法
Feb 11 Javascript
JavaScript实现飞舞的泡泡效果
Feb 07 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 24 Javascript
如何在 ant 的table中实现图片的渲染操作
Oct 28 Javascript
微信小程序实现轮播图指示器
Jun 25 Javascript
webpack进阶——缓存与独立打包的用法
Aug 02 #Javascript
使用vue构建移动应用实战代码
Aug 02 #Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 #Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 #jQuery
ReactNative列表ListView的用法
Aug 02 #Javascript
ReactNative页面跳转Navigator实现的示例代码
Aug 02 #Javascript
利用JavaScript实现栈的数据结构示例代码
Aug 02 #Javascript
You might like
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
PHP的反射机制实例详解
2017/03/29 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
PHP解决高并发的优化方案实例
2020/12/10 PHP
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
基于jQuery UI CSS Framework开发Widget的经验
2010/08/21 Javascript
javascript工具库代码
2012/03/29 Javascript
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
javascript记录文本框内文字个数检测文字个数变化
2014/10/14 Javascript
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
js实现键盘控制DIV移动的方法
2015/01/10 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
基于JQuery打造无缝滚动新闻步骤详解
2016/03/31 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
Vue验证码60秒倒计时功能简单实例代码
2018/06/22 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
Python 的 with 语句详解
2014/06/13 Python
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
Python argparse模块使用方法解析
2020/02/20 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
Geekbuying波兰:购买中国电子产品
2019/10/20 全球购物
《藏戏》教学反思
2014/02/11 职场文书
我们的节日端午节活动方案
2014/03/02 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
2014年医生工作总结
2014/11/21 职场文书
2015年助残日活动总结
2015/03/27 职场文书
雷锋电影观后感
2015/06/10 职场文书