Angularjs cookie 操作实例详解


Posted in Javascript onSeptember 27, 2017

摘要

现在很多app采用内嵌h5的方式进行开发,有些数据会存在webveiw的cookie中,那么如果使用angularjs开发单页应用,就需要用到angularjs的cookie操作。这里提供一个简单的学习demo。方便快速上手。

一个例子

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myapp">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <script src="Scripts/angular.js"></script>
  <script src="Scripts/angular-cookies.js"></script>
  <script>
    angular.module("myapp", ["ngCookies"]).controller("TestController", function ($cookies) {     // Put cookie
      $cookies.put('mytest', 'mytest');
      // Get cookie
      var mytestCookie = $cookies.get('mytest');
      console.log(mytestCookie)
      // Removing a cookie
      // $cookie.remove('mytest');
      console.log($cookies.get('mytest'));
    });
  </script>
</head>
<body ng-controller="TestController">
</body>
</html>

测试结果

Angularjs cookie 操作实例详解

可以看到上面结果设置成功了,但过期时间是session,这种cookie是跟当前会话相同了,也就是关闭浏览器之后就会消失,这是因为我们没有设置cookie的过期时间造成了,可以通过下面的方式设置过期时间。

var expireDate = new Date();
      expireDate.setDate(expireDate.getDate() + 30);//设置cookie保存30天
      // Put cookie
      $cookies.put('mytest', 'mytest', { 'expires': expireDate });

Angularjs cookie 操作实例详解

总结

这里需要注意,在网上看到很多实用$cookieStore的,确实可以设置成功,但设置过期时间的时候会失效,建议采用$cookies

以上所述是小编给大家介绍的Angularjs cookie 操作实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
Oct 17 Javascript
JavaScript 中的日期和时间及表示标准介绍
Aug 21 Javascript
js借助ActiveXObject实现创建文件
Sep 29 Javascript
php的文件上传入门教程(实例讲解)
Apr 10 Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
React-router中结合webpack实现按需加载实例
May 25 Javascript
通过一次报错详细谈谈Point事件
May 17 Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 Javascript
vue el-table实现自定义表头
Dec 11 Javascript
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
js移动端图片压缩上传功能
Aug 18 #Javascript
微信小程序报错:this.setData is not a function的解决办法
Sep 27 #Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 #Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 #Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 #Javascript
微信小程序中button组件的边框设置的实例详解
Sep 27 #Javascript
使用javaScript实现鼠标拖拽事件
Apr 03 #Javascript
You might like
PHP中10个不常见却非常有用的函数
2010/03/21 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
js函数的引用, 关于内存的开销
2012/09/17 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
基于jQuery的checkbox全选问题分析
2016/11/18 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
python实现根据用户输入从电影网站获取影片信息的方法
2015/04/07 Python
Python基于PycURL实现POST的方法
2015/07/25 Python
python实现括号匹配的思路详解
2018/08/23 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
python用什么编辑器进行项目开发
2020/06/17 Python
基于python实现计算两组数据P值
2020/07/10 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
CSS3 @media的基本用法总结
2019/09/10 HTML / CSS
儿科护士实习自我鉴定
2013/10/17 职场文书
总经理岗位职责
2013/11/09 职场文书
一封普通求职者的求职信
2013/11/20 职场文书
大学生2014全国两会学习心得体会
2014/03/10 职场文书
职业生涯规划书范文
2014/03/10 职场文书
愚人节活动策划方案
2014/03/11 职场文书
应届生求职信范文
2014/05/26 职场文书
拾金不昧表扬信
2015/01/16 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
诗词赏析-(浣溪沙)
2019/08/13 职场文书