Angularjs cookie 操作实例详解

 更新时间:2017年09月27日 16:50:12   作者:wolfy  
本文给大家分享Angularjs cookie 操作实例详解,demo案例分析,感兴趣的朋友参考下吧

摘要

现在很多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>

测试结果

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

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

总结

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

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

相关文章

  • AngularJS入门教程之AngularJS 模板

    AngularJS入门教程之AngularJS 模板

    本文主要介绍AngularJS 模板,这里整理了详细相关资料,并附示例代码,有兴趣的小伙伴可以参考下
    2016-08-08
  • 深入探究AngularJs之$scope对象(作用域)

    深入探究AngularJs之$scope对象(作用域)

    本篇文章主要介绍了深入探究AngularJs之$scope对象(作用域),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • Angular2实现组件交互的方法分析

    Angular2实现组件交互的方法分析

    这篇文章主要介绍了Angular2实现组件交互的方法,结合实例形式总结分析了Angular2中组件交互的相关操作技巧与注意事项,需要的朋友可以参考下
    2017-12-12
  • 在 Angular 中使用 ViewChild 访问子组件、指令或 DOM 元素的操作方法

    在 Angular 中使用 ViewChild 访问子组件、指令或 D

    这篇文章主要介绍了如何在 Angular 中使用 ViewChild 来访问子组件、指令或 DOM 元素,在本教程中,您使用了 ViewChild 来从父组件类中访问指令、子组件和 DOM 元素,需要的朋友可以参考下
    2024-08-08
  • Angularjs 实现动态添加控件功能

    Angularjs 实现动态添加控件功能

    这篇文章主要介绍了Angularjs 实现动态添加控件功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-05-05
  • angularjs的一些优化小技巧

    angularjs的一些优化小技巧

    这篇文章主要介绍了angularjs的一些优化小技巧,本文总结了5种优化技巧,如一次绑定、尽可能少调用 ng-repeat、尽量在指令里写原生语法、页面内尽量少用filters等,需要的朋友可以参考下
    2014-12-12
  • angularjs 源码解析之scope

    angularjs 源码解析之scope

    $scope 的使用贯穿整个 Angular App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了 $scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的 $scope 发生改变时也会立刻重新渲染视图.
    2016-08-08
  • 解决ionic和angular上拉加载的问题

    解决ionic和angular上拉加载的问题

    这篇文章主要介绍了解决ionic和angular上拉加载的问题,需要的朋友可以参考下
    2017-08-08
  • angularjs实现简单的购物车功能

    angularjs实现简单的购物车功能

    这篇文章主要为大家详细介绍了angularjs实现简单的购物车功能 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • AngularJS日程表案例详解

    AngularJS日程表案例详解

    本文通过实例代码给大家介绍了AngularJS日程表案例详解,通过简单代码实现了添加事件/完成事件/删除事件功能,具体代码大家参考下本文
    2017-08-08

最新评论