AngularJS Cookies缓存

作者: haibao 分类: 笔记 发布时间: 2016-07-20 16:13
兴趣是最好的老师——爱因斯坦

AngularJS 提供了很好的 $cookies 和 $cookieStore API 用来处理 cookies 。 这两个服务都能够很好的发挥HTML5 cookies,当HTML5 API可用时浏览器会选择使用HTML5提供的API,如果不可用则默认选择document.cookies。无论那种方式,你都可以选择使用相同的API来进行工作。

Tips: 如果用原生的document.cookies,再去用angular的$cookies/$cookieStore 获取中文值的话,则会乱码哦~~ 反之也是

下面说下使用方法:

1. 加载JS文件,并且依赖 cookie module

1
2
<script src="http://code.angularjs.org/1.4.1/angular.min.js"></script>
<script src="http://code.angularjs.org/1.4.1/angular-cookies.min.js"></script>

2. 创建angular module,将cookie module 注入到 controller 中

1
2
3
var MyApp = angular.module( 'MyApp', ['ngCookies'] ).config( function(){} );
 
MyApp.controller('DemoController', ["$scope", "$cookies", "$cookieStore", function($scope, $cookies, $cookieStore){ ... }]);

3. 使用方法

现在可以使用 ‘put’ 、 ‘get’ 、‘remove’ 方法操作 cookie , $cookieStore 可以直接存储对象到cookie中,它会使用angularjs 的 toJson/fromJson 自动序列化和反序列化。

举个荔枝:

1
2
3
4
5
6
7
8
9
10
11
12
13
$cookieStore.put("name","haibao");
$cookieStore.get("name");
$cookieStore.remove("name");
 
$cookieStore.put("person", {
    name: "haibao",
    age: 26
});
$scope.person = $cookieStore.get("person");
 
$cookies.put("name","haibao");
$cookies.get("name");
$cookies.remove("name");

好了,简单的使用就到此结束了,如果你需要更复杂的操作cookie,比如获取某cookie多个参数的【如这种:pid: “num=2&checked=checked”】,自己可以新增一个方法实现哦。

如果遇到乱码的情况,可以试试escape/unescape。

本篇完~

本文地址:[AngularJS Cookies缓存],如没有标注转载,均为原创,转载请保留出处和链接,欢迎分享 谢谢。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

一条评论

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>