詳解Angular操作cookies方法
本文介紹了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寫的方法去設(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寫的方法去讀取
其實(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)通過angular的toJson/fromJson進(jìn)行序列化/反序列化。
$cookies
提供瀏覽器cookies的讀/寫訪問操作。
這兩個(gè)都要引入ngCookies模塊才能使用，這個(gè)模塊在1.4版本之后就有了
從源碼中得知$cookieStore返回了三個(gè)方法get put remove 他們分別用toJson/fromJson進(jìn)行序列化/反序列化
簡(jiǎn)單的寫了幾個(gè)例子來測(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è)置過期日期
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)文章
angular 實(shí)現(xiàn)同步驗(yàn)證器跨字段驗(yàn)證的方法
幾乎每個(gè)web應(yīng)用都會(huì)用到表單，那么驗(yàn)證器就是必不可少的東西，這篇文章主要介紹了angular 實(shí)現(xiàn)同步驗(yàn)證器跨字段驗(yàn)證的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-04-04
AngularJs ng-repeat 嵌套如何獲取外層$index
這篇文章主要介紹了AngularJs ng-repeat 嵌套如何獲取外層$index的相關(guān)資料,需要的朋友可以參考下2016-09-09
本文主要介紹AngularJS 模板，這里整理了詳細(xì)相關(guān)資料，并附示例代碼，有興趣的小伙伴可以參考下2016-08-08
Angular中$state.go頁面跳轉(zhuǎn)并傳遞參數(shù)的方法
這篇文章主要介紹了angular中$state.go頁面跳轉(zhuǎn)并傳遞參數(shù)的方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-05-05
系統(tǒng)的學(xué)習(xí)了一下angularjs，發(fā)現(xiàn)angularjs的有些思想根php的模塊smarty很像，例如數(shù)據(jù)綁定，filter。如果對(duì)smarty比較熟悉的話，學(xué)習(xí)angularjs會(huì)比較容易一點(diǎn),這篇文章給大家介紹angularjs filter用法詳解，感興趣的朋友一起學(xué)習(xí)吧2015-12-12
利用CSS3在Angular中實(shí)現(xiàn)動(dòng)畫
這篇文章主要介紹了如何利用CSS3在Angular中實(shí)現(xiàn)動(dòng)畫效果，對(duì)angular動(dòng)畫相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01
Ubuntu系統(tǒng)下Angularjs開發(fā)環(huán)境安裝
本文主要介紹 Ubuntu系統(tǒng)下Angularjs開發(fā)環(huán)境安裝，這里詳細(xì)介紹了安裝步驟和注意事項(xiàng)，有在Ubuntu 環(huán)境下開發(fā)的朋友可以參考下2016-09-09
AngularJS通過ng-Img-Crop實(shí)現(xiàn)頭像截取的示例
本篇文章主要介紹了AngularJS通過ng-Img-Crop實(shí)現(xiàn)頭像截取的示例，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
詳解Angular中實(shí)現(xiàn)自定義組件的雙向綁定的兩種方法
這篇文章主要介紹了詳解Angular中實(shí)現(xiàn)自定義組件的雙向綁定的兩種方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
這篇文章主要為大家詳細(xì)介紹了AngularJS 避繁就簡(jiǎn)的路由的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-07-07