angularjs - navigationend - typescript change page




如何在AngularJS中訪問cookies? (6)

AngularJS提供ngCookies模塊和$ cookieStore服務來使用瀏覽器Cookies。

我們需要添加angular-cookies.min.js文件來使用cookie功能。

這裡是AngularJS Cookie的一些方法。

  • 獲得(鍵); //此方法返回給定Cookie密鑰的值。

  • 的getObject(鍵); //此方法返回給定Cookie密鑰的反序列化值。

  • 得到所有(); //此方法返回一個包含所有cookie的鍵值對象。

  • 放(鍵,值,[選項]); //此方法為給定的Cookie密鑰設置一個值。

  • 刪除(鍵,[選項]); //這個方法刪除給定的cookie。

HTML

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular-cookies.min.js"></script>
</head>
<body ng-controller="MyController">
{{cookiesUserName}} loves {{cookietechnology}}.
</body>
</html>

JavaScript的

var myApp = angular.module('myApp', ['ngCookies']);
myApp.controller('MyController', ['$scope', '$cookies', '$cookieStore', '$window', function($scope, $cookies, $cookieStore, $window) {
$cookies.userName = 'Max Joe';
$scope.cookiesUserName = $cookies.userName;
$cookieStore.put('technology', 'Web');
$scope.cookietechnology = $cookieStore.get('technology'); }]);

我從http://www.tutsway.com/simple-example-of-cookie-in-angular-js.php參考。

什麼是AngularJS訪問cookie的方式? 我已經看到了對服務和模塊的引用,但沒有例子。

有沒有,還是沒有AngularJS規範的方法?



在版本1.4.x中$cookieStore 棄用 $cookieStore ,因此如果您使用的是最新版本的角色,請使用$cookies$cookieStore$cookies語法保持不變:

$cookies.put("key", "value"); 
var value = $cookies.get("key");

請參閱Docs以獲取API概述。 還要注意,cookie服務已增強了一些新的重要功能,如設置過期(請參閱此答案 )和域(請參閱CookiesProvider文檔 )。

請注意,在1.3.x或更低版本中,$ cookie的語法不同於上面的語法:

$cookies.key = "value";
var value = $cookies.value; 

另外,如果您使用的是涼亭,請確保正確輸入您的包名稱:

bower install [email protected] 

其中XYZ是您正在運行的AngularJS版本。 還有另外一種包裝在涼亭“角餅乾”(沒有's'),這不是官方的角包裝。


最初接受的答案提到了jquery.cookie插件 。 幾個月前,它被重命名為js-cookie並刪除了jQuery依賴項。 其中一個原因就是讓它很容易與Angular等其他框架集成。

現在,如果您想要將js-cookie與角度整合,就像下面這樣簡單:

module.factory( "cookies", function() {
  return Cookies.noConflict();
});

就是這樣。 沒有jQuery。 沒有ngCookies。

您還可以創建自定義實例來處理寫入不同的特定服務器端Cookie。 以PHP為例,轉換空間 在服務器端加一個加號+而不是百分號編碼它:

module.factory( "phpCookies", function() {
  return Cookies
    .noConflict()
    .withConverter(function( value, name ) {
      return value
            // Decode all characters according to the "encodeURIComponent" spec
            .replace(/(%[0-9A-Z]{2})+/g, decodeURIComponent)
            // Decode the plus sign to spaces
            .replace(/\+/g, ' ')
    });
});

自定義提供程序的用法如下所示:

module.service( "customDataStore", [ "phpCookies", function( phpCookies ) {
  this.storeData = function( data ) {
    phpCookies.set( "data", data );
  };
  this.containsStoredData = function() {
    return phpCookies.get( "data" );
  }
}]);

我希望這可以幫助任何人。

查看此問題的詳細信息: https://github.com/js-cookie/js-cookie/issues/103https://github.com/js-cookie/js-cookie/issues/103

有關如何與服務器端集成的詳細文檔,請參閱此處: https://github.com/js-cookie/js-cookie/blob/master/SERVER_SIDE.mdhttps://github.com/js-cookie/js-cookie/blob/master/SERVER_SIDE.md


這是一個使用$ cookie的簡單示例。 點擊按鈕後,cookie將被保存,然後在頁面重新加載後恢復。

app.html:

<html ng-app="app">
<head>
    <meta charset="utf-8" />
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-cookies.js"></script>
    <script src="app.js"></script>
</head>
<body ng-controller="appController as vm">

    <input type="text" ng-model="vm.food" placeholder="Enter food" />

    <p>My favorite food is {{vm.food}}.</p>

    <p>Open new window, then press Back button.</p>
    <button ng-click="vm.openUrl()">Open</button>
</body>
</html>

app.js:

(function () {
    "use strict";

    angular.module('app', ['ngCookies'])
    .controller('appController', ['$cookies', '$window', function ($cookies, $window) {
        var vm = this;

        //get cookie
        vm.food = $cookies.get('myFavorite');

        vm.openUrl = function () {
            //save cookie
            $cookies.put('myFavorite', vm.food);
            $window.open("http://www.google.com", "_self");
        };
    }]);

})();

這是你如何設置和獲取cookie值。 這是我發現這個問題時最初尋找的東西。

請注意,我們使用$cookieStore而不是$cookies

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script>
  <script src="http://code.angularjs.org/1.0.0rc10/angular-cookies-1.0.0rc10.js"></script>
  <script>
    angular.module('myApp', ['ngCookies']);
    function CookieCtrl($scope, $cookieStore) {
      $scope.lastVal = $cookieStore.get('tab');

      $scope.changeTab = function(tabName){
          $scope.lastVal = tabName;
          $cookieStore.put('tab', tabName);
      };
    }
  </script>
</head>
<body ng-controller="CookieCtrl">
    <!-- ... -->
</body>
</html>




angular-cookies