当前位置: 首页 » 前端开发 » AngularJS Cookies缓存
 |  全屏浏览  |  字号调整:

AngularJS Cookies缓存

2016-07-20 16:13:48 前端开发 0 1.02 k 百度已收录
本文最后更新于2016-07-20,已超过 1年没有更新,如果文章内容、图片或者下载资源失效,请留言反馈,我会及时处理,谢谢!
历史上的今天:10月20日 - 1962年,中印边境自卫反击战爆发

周六下午好, 本文除去代码部分,共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/

版权声明:本博客所有文章除特别声明外,均采用 署名-非商业性使用-禁止演绎 4.0 国际 许可协议。请尊重他人的劳动成果!

一条评论
  • 富婆包男人 - 未知操作系统  |  未知浏览器

    2016-12-21 00:39

    顶一个!!!!


发表评论

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