AngularJS Cookies缓存

haibao 笔记 2016-07-20 16:13 717
一个人的价值, 在于他贡献了什么, 而不在于他获得了什么。——爱因斯坦

凌晨好, 本文除去代码部分,共1006个字,预计阅读时间需要3分钟。

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缓存

本文地址:http://www.hehaibao.com/angularjs-cookies/

版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!

一条评论

发表评论

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