Angular中ngCookies模塊介紹-創(chuàng)新互聯(lián)

1.Cookie介紹

Cookie總是保存在客戶端中，按在客戶端中的存儲位置，可分為內(nèi)存Cookie和硬盤Cookie。內(nèi)存Cookie由瀏覽器維護，保存在內(nèi)存中，瀏覽器關(guān)閉后就消失了，其存在時間是短暫的。硬盤Cookie保存在硬盤里，有一個過期時間，除非用戶手工清理或到了過期時間，硬盤Cookie不會被刪除，其存在時間是長期的。所以，按存在時間，可分為非持久Cookie和持久Cookie。

專注于為中小企業(yè)提供網(wǎng)站設(shè)計制作、網(wǎng)站設(shè)計服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)歙縣免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了近1000家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

主要因為HTTP協(xié)議無狀態(tài)性，服務(wù)器需要知道用戶在之前的頁面做了哪些操作，所欲引入Cookie，是一種解決HTTP協(xié)議無狀態(tài)的一種方式。

服務(wù)器可以設(shè)置或讀取Cookies中包含的信息，用來維護用戶和服務(wù)器會話中的狀態(tài)。

2.Cookie應(yīng)用場景

  • 電子商務(wù)購物網(wǎng)站，需要在用戶點擊支付之前，知道用戶購買了哪些商品。 說明：目前也有不部門實現(xiàn)是，每次點擊購買，都直接發(fā)請求到后臺，后臺存儲要購買的數(shù)據(jù)，然后再點擊支付之前，從后臺獲取用戶要購買的尚品數(shù)據(jù)，不使用Cookie也可以完成。

  • 用戶登錄，記住密碼。開發(fā)者可以在用戶登錄之后，將用戶名和密碼，以某種加密的方式存儲到客戶端，第二次登錄時，直接獲取Cookie，然后發(fā)送Cookie到后臺服務(wù)器進行驗證，達到用戶勾選了“記住密碼”，后續(xù)無需輸入用戶名和密碼的功能。當(dāng)然是在Cookie的有效期內(nèi)。

基于jQuery的jQuery.cookie.js是很多開發(fā)者用于項目中操作Cookie的庫。

Angular中為了用戶方便和簡潔的操作Cookie，提供了ngCookies模塊。這個模塊下面提供2種服務(wù)，分別是：

  1. $cookieStore服務(wù)

  2. $cookies服務(wù)
    Angular中ngCookies模塊介紹

3.Angular中的$cookies服務(wù)

$cookies類似jQuery.cookie.js，提供了Angular操作Cookie的方法，普通情況下，JavaScript是不同向Cookie寫入對象的，但是Angular提供向Cookie寫入對象的方法。 $cookies提供一下方法：
get(key) 返回一個指定key的cookie值

getObject(key) 返回一個指定key的反序列化cookie值

getAll() 以key-value對象形式返回所有的cookie

put(key,value,[options]) 寫入一個key-value的cookie

putObject(key,value,[options])序列化設(shè)置一個key-value的Cookie

remove(key,[options]) 移除對應(yīng)key的cookie

demo如下：

angular.module('cookiesExample', ['ngCookies'])
.controller('ExampleController', ['$cookies', function($cookies) {
  // Retrieving a cookie
  var favoriteCookie = $cookies.get('myFavorite');
  // Setting a cookie
  $cookies.put('myFavorite', 'oatmeal');}]);

比如設(shè)置cookie的寫入目錄，或者過期時間。我們可以用到的$cookiesProvider里面的default配置信息。

https://docs.angularjs.org/api/ngCookies/provider/$cookiesProvider#defaults 頁面可以查看$cookieProvider里面可以配置的信息。比如用戶登錄，記住密碼的cookie有效期是7天。代碼如下：

var expireDate = new Date();expireDate.setDate(expireDate.getDate() + 7);var user={username:encryptionStr("admin"),password:encryptionStr('123456')}$cookies.putObject('user',user,{'expires':expireDate});

encryptionStr() 是自定義的加密字符串方法。

4.Angular中的$cookieStore服務(wù)

$cookieStore 服務(wù)是基于后端的Session Cookies，所以不能寫入的時候不能使用options屬性，而且它的過期時間就是session。關(guān)閉瀏覽器了，cookie就失效了。在開發(fā)過程中，遇到一位同事，要完成 用戶登錄記住用戶名和密碼功能，使用的是如下代碼，代碼是無效的，因為$cookieStore不可以通過設(shè)置default里面的expires設(shè)置過期時間，$cookieStore操作Cookie都是基于Session過期的。

var expireDate = new Date();
expireDate.setDate(expireDate.getDate() + 7);var user={
username:encryptionStr("admin"),
password:encryptionStr('123456')
}

$cookieStore.putObject('user',user,{'expires':expireDate});

寫這篇博客的時候，Angular官網(wǎng)已經(jīng)提示，$cookieStore已經(jīng)過時，推薦使用$cookies服務(wù)。
Angular中ngCookies模塊介紹

5.小結(jié)

ngCookies模塊提供的$cookies服務(wù)，為開發(fā)者操作讀取和寫入Cookie提供了極大的便利性，而且還支持寫入和讀取JSON對象。當(dāng)時在開發(fā)過程中，我們還是不能過多向Cookie中寫入數(shù)據(jù)，一方面Cookie的大小有限制，另外一方面敏感的數(shù)據(jù)寫入Cookie，帶來安全性上的風(fēng)險。比如前面說到的完成“記住密碼”功能，我們存儲的用戶名和密碼，需要和后臺約定一種加密方式，不能直接明文存儲。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁標題：Angular中ngCookies模塊介紹-創(chuàng)新互聯(lián)
文章位置：http://muchs.cn/article4/shcie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、App設(shè)計、Google、App開發(fā)、定制網(wǎng)站、品牌網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)