詳解Angular操作cookies方法
更新時間：2018年06月01日 10:17:27 作者：Wsscat
這篇文章主要介紹了詳解Angular操作cookies方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
本文介紹了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寫的方法去讀取
其實angular也有相應(yīng)的方法去操作cookies的，加載這兩個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; 這個是angular設(shè)置cookies方法
$cookieStore
提供一個被session cookies支持的鍵值對（字符串-對象）存儲。被存入和取出的對象將自動通過angular的toJson/fromJson進(jìn)行序列化/反序列化。
$cookies
提供瀏覽器cookies的讀/寫訪問操作。
這兩個都要引入ngCookies模塊才能使用，這個模塊在1.4版本之后就有了
從源碼中得知$cookieStore返回了三個方法get put remove 他們分別用toJson/fromJson進(jìn)行序列化/反序列化
簡單的寫了幾個例子來測試下
<!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>
其實平時我們這樣就可以把自己需要的cookies設(shè)置進(jìn)去
$cookies.name = 'autumnswind';
但是當(dāng)我們要設(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");
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
幾乎每個web應(yīng)用都會用到表單，那么驗證器就是必不可少的東西，這篇文章主要介紹了angular 實現(xiàn)同步驗證器跨字段驗證的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下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ù)的方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-05-05
系統(tǒng)的學(xué)習(xí)了一下angularjs，發(fā)現(xiàn)angularjs的有些思想根php的模塊smarty很像，例如數(shù)據(jù)綁定，filter。如果對smarty比較熟悉的話，學(xué)習(xí)angularjs會比較容易一點,這篇文章給大家介紹angularjs filter用法詳解，感興趣的朋友一起學(xué)習(xí)吧2015-12-12
這篇文章主要介紹了如何利用CSS3在Angular中實現(xiàn)動畫效果，對angular動畫相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01
Ubuntu系統(tǒng)下Angularjs開發(fā)環(huán)境安裝
本文主要介紹 Ubuntu系統(tǒng)下Angularjs開發(fā)環(huán)境安裝，這里詳細(xì)介紹了安裝步驟和注意事項，有在Ubuntu 環(huán)境下開發(fā)的朋友可以參考下2016-09-09
AngularJS通過ng-Img-Crop實現(xiàn)頭像截取的示例
本篇文章主要介紹了AngularJS通過ng-Img-Crop實現(xiàn)頭像截取的示例，具有一定的參考價值，有興趣的可以了解一下2017-08-08
詳解Angular中實現(xiàn)自定義組件的雙向綁定的兩種方法
這篇文章主要介紹了詳解Angular中實現(xiàn)自定義組件的雙向綁定的兩種方法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
這篇文章主要為大家詳細(xì)介紹了AngularJS 避繁就簡的路由的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-07-07