如果你的应用足够大、足够复杂,那么你很快就会遇到这样一咱种情况:你需要在客户端存储一些状态信息,这些状态信息是跨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应用》