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 相关文章推荐
jquery1.5.1中根据元素ID获取元素对象的代码
Apr 02 Javascript
AngularJS基础学习笔记之表达式
May 10 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
Vue插件打包与发布的方法示例
Aug 20 Javascript
vue-cli项目代理proxyTable配置exclude的方法
Sep 20 Javascript
微信小程序中遇到的iOS兼容性问题小结
Nov 14 Javascript
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
从零撸一个pc端vue的ui组件库( 计数器组件 )
Aug 08 Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 Javascript
vue-iview动态新增和删除的方法
Jun 17 Javascript
完美解决vue 中多个echarts图表自适应的问题
Jul 19 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 Javascript
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 htmlspecialchars加强版
2010/02/16 PHP
php设计模式之单例模式使用示例
2014/01/20 PHP
PHP引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
完美的php分页类
2017/10/24 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
JS全局变量和局部变量最新解析
2016/06/24 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
JS常见构造模式实例对比分析
2018/08/27 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
2019/08/20 Javascript
React中Ref 的使用方法详解
2020/04/28 Javascript
JavaScript实现缓动动画
2020/11/25 Javascript
跟老齐学Python之有点简约的元组
2014/09/24 Python
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
python计算两个数的百分比方法
2018/06/29 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
详解python中的Turtle函数库
2018/11/19 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
简单了解python协程的相关知识
2019/08/31 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
英国家用电器购物网站:Hughes
2018/02/23 全球购物
Currentbody法国:健康与美容高科技产品
2020/08/16 全球购物
四风问题自查报告剖析材料
2014/02/08 职场文书
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
行政办公室岗位职责
2014/03/18 职场文书
公司经理聘任书
2014/03/29 职场文书
晚会主持人开场白台词
2015/05/28 职场文书
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android