詳解Angular操作cookies方法
更新時(shí)間：2018年06月01日 10:17:27 作者：Wsscat
這篇文章主要介紹了詳解Angular操作cookies方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
本文介紹了Angular操作cookies方法，分享給大家，具體如下：
var setCookie = function(name, value) {
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
//$cookies[name] = value;
};
這是用Javascript寫(xiě)的方法去設(shè)置
var getCookie = function(name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
這是用Javascript寫(xiě)的方法去讀取
其實(shí)angular也有相應(yīng)的方法去操作cookies的，加載這兩個(gè)module的依賴文件
<script src="http://code.angularjs.org/1.2.9/angular.min.js"></script> <script src="http://code.angularjs.org/1.2.9/angular-cookies.min.js"></script>
源碼是這樣的
function(a, b, c) {
"use strict";
b.module("ngCookies", ["ng"]).factory("$cookies", ["$rootScope", "$browser",
function(a, d) {
function e() {
var a, e, f, i;
for (a in h) k(g[a]) && d.cookies(a, c);
for (a in g) e = g[a], b.isString(e) ? e !== h[a] && (d.cookies(a, e), i = !0) : b.isDefined(h[a]) ? g[a] = h[a] : delete g[a];
if (i) {
i = !1, f = d.cookies();
for (a in g) g[a] !== f[a] && (k(f[a]) ? delete g[a] : g[a] = f[a], i = !0)
}
}
var f, g = {},
h = {},
i = !1,
j = b.copy,
k = b.isUndefined;
return d.addPollFn(function() {
var b = d.cookies();
f != b && (f = b, j(b, h), j(b, g), i && a.$apply())
})(), i = !0, a.$watch(e), g
}
]).factory("$cookieStore", ["$cookies",
function(a) {
return {
get: function(c) {
var d = a[c];
return d ? b.fromJson(d) : d
},
put: function(c, d) {
a[c] = b.toJson(d)
},
remove: function(b) {
delete a[b]
}
}
}
])
}(window, window.angular)
$cookies[name] = value; 這個(gè)是angular設(shè)置cookies方法
$cookieStore
提供一個(gè)被session cookies支持的鍵值對(duì)（字符串-對(duì)象）存儲(chǔ)。被存入和取出的對(duì)象將自動(dòng)通過(guò)angular的toJson/fromJson進(jìn)行序列化/反序列化。
$cookies
提供瀏覽器cookies的讀/寫(xiě)訪問(wèn)操作。
這兩個(gè)都要引入ngCookies模塊才能使用，這個(gè)模塊在1.4版本之后就有了
從源碼中得知$cookieStore返回了三個(gè)方法get put remove 他們分別用toJson/fromJson進(jìn)行序列化/反序列化
簡(jiǎn)單的寫(xiě)了幾個(gè)例子來(lái)測(cè)試下
<!DOCTYPE html>
<html ng-app="AutumnsWindsApp" ng-controller="aswController">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.9/angular-cookies.min.js"></script>
<body>
{{title}}
</body>
<script>
var AutumnsWindsApp = angular.module('AutumnsWindsApp', ['ngCookies']);
AutumnsWindsApp.controller('aswController', function($cookies, $cookieStore, $scope) {
$cookies.name = 'autumnswind';
$scope.title = "Hello, i'm autumnswind :)";
$cookieStore.put("skill", "##");
//刪除cookies
$cookieStore.remove("name");
//設(shè)置過(guò)期日期
var time = new Date().getTime() + 5000;
$cookieStore.put("cookie", "Hello wsscat", {
expires: new Date(new Date().getTime() + 5000)
});
$cookieStore.put("objCookie", {
value: "wsscat cat cat",
age: "3",
}, {
expires: new Date(new Date().getTime() + 5000)
});
console.log($cookies);
console.log($cookies['objCookie']);
})
</script>
</html>
其實(shí)平時(shí)我們這樣就可以把自己需要的cookies設(shè)置進(jìn)去
$cookies.name = 'autumnswind';
但是當(dāng)我們要設(shè)置一個(gè)有效時(shí)間的時(shí)候我們就用這樣的方法把它設(shè)置進(jìn)去
var time = new Date().getTime() + 5000;
$cookieStore.put("cookie", "Hello wsscat", {
expires: new Date(new Date().getTime() + 5000)
});
我們還可以進(jìn)行刪除等操作
$cookieStore.remove("name");
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
AngularJS學(xué)習(xí)第二篇 AngularJS依賴注入
這篇文章主要為大家詳細(xì)介紹了AngularJS學(xué)習(xí)第二篇，理解什么是AngularJS依賴注入，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要給大家介紹了關(guān)于Angular2使用jQuery的方法教程，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)跟著小編一起學(xué)習(xí)學(xué)習(xí)吧。2017-05-05
本文主要介紹了angular十大常見(jiàn)問(wèn)題，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
本文介紹了AngularJS 多指令Scope問(wèn)題的解決，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
angular第三方包開(kāi)發(fā)整理(小結(jié))
本篇文章主要介紹了angular第三方包開(kāi)發(fā)整理(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
這篇文章主要介紹了詳解angular應(yīng)用容器化部署，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
AngularJs入門(mén)教程之環(huán)境搭建+創(chuàng)建應(yīng)用示例
這篇文章主要介紹了AngularJs入門(mén)教程之環(huán)境搭建+創(chuàng)建應(yīng)用的方法,較為詳細(xì)的分析了AngularJS的功能、下載及應(yīng)用創(chuàng)建方法,需要的朋友可以參考下2016-11-11
AngularJS動(dòng)態(tài)綁定HTML的方法分析
這篇文章主要介紹了AngularJS動(dòng)態(tài)綁定HTML的方法,結(jié)合實(shí)例形式分析了AngularJS實(shí)現(xiàn)動(dòng)態(tài)綁定HTML的相關(guān)操作指令用法與使用注意事項(xiàng),需要的朋友可以參考下2016-11-11
angular json對(duì)象push到數(shù)組中的方法
下面小編就為大家分享一篇angular json對(duì)象push到數(shù)組中的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Angular.js中ng-include用法及多標(biāo)簽頁(yè)面的實(shí)現(xiàn)方式詳解
這篇文章主要給大家介紹了在Angular.js中ng-include用法及多標(biāo)簽頁(yè)面的實(shí)現(xiàn)方式的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。2017-05-05