AngularJS中操作Cookies

AngularJS中操作Cookies

前端  /  管理员 发布于 2020-03-08 13:33:15   28

        如果你的应用足够大、足够复杂，那么你很快就会遇到这样一咱种情况：你需要在客户端存储一些状态信息，这些状态信息是跨session(会话)的。你可能还记得利用document.cookie接口直接操作纯文本cookie的痛苦经历。

        幸运的是，这种方式已经一去不复返了，在所有现代浏览器中几乎都可以使用HTML5 API了。更进一步，AngularJS为你提供了很好用的$cookie和$cookieStore API来操作cookie。这两个服务都可以和HTML5 cookie(http://www.w3schools.com/html/html5_webstorage.asp)很好地协同工作——如果发现可以使用HTML5 API，它们就会使用；如果发现不能使用HTML5 API，它们就会使用原始的document.cookies对象。在两种方式中，可以用相同的接口来调用。

        我们先来看一下$cookies服务。$cookies只是一个简单的对象，它带有一些键和值。向这个对象上添加键和值就相当于向cookie里添加信息；删除键和值就相当于从对应的cookie里进行删除操作——就是这么简单。

        但是在大多数情况下，我们并不想直接在$cookies层面上进行操作，因为那意味着直接操作字符串，并且需要自已进行解析，需要把数据解析成对象，或者把对象解析成数据。对于这些场景，我们可以使用$cookieStore，它提供了编程的方式来写入和删除cookies。那么，在使用$cookieStore的情况下，如果想让一个SearchController能记住之前的5个搜索结果应该怎么做呢？

function SearchController($scope, $cookieStore) {    $scope.search = function(text) {         //在这里进行搜索操作         ...         //获取之前的搜索结果，如果没有找到任何结果，初始化一个空数组         var pastSearches = $cookieStore.get('myapp.past.searches') || [];         if(pastSearches.length > 5) {              pastSearches = pastSearches.splice(0);         }         pastSearches.push(text);         $cookieStore.push('myapp.past.searches', pastSearches);   };}

 

文章来源：《用AngularJS开发下一代Web应用》