我有一个单页应用程序,具有用户身份验证功能,并且在此处共享会话信息没有问题。
但是我有一部分网站是静态页面,在那里我只想包含会话信息(已登录的用户或登录表单)。我如何在两个应用程序之间共享会话信息?
我建议创建一个服务,包装 localStorage
或其他API来存储持久数据。这里是使用 localStorage
实现的示例。
这个实现是同步的,但如果我使用像websql
或者服务器数据库,那么我会重构它来使用promises返回存储对象。
控制器
var demo = angular.module('demo', [ 'appStorage' ]);
demo.controller('AppStorageController', [ '$scope', 'appStorage',
function($scope, appStorage) {
appStorage('MyAppStorage', 'myAppStorage', $scope);
} ]);
HTML
<div ng-controller="AppStorageController">
<p>Local Storage: {{myAppStorage}}</p>
<p>
Username: <input type="text" ng-model="myAppStorage.username"></input>
</p>
<p>
Remember me: <input type="checkbox"
ng-model="myAppStorage.rememberMe"></input>
</p>
</div>
JS
:JavaScriptangular.module('appStorage', []).factory('appStorage',
[ '$window', function($window) {
var appStorages = {};
var api = undefined;
if ($window.localStorage) {
api = {
set : function(name, value) {
$window.localStorage.setItem(name, JSON.stringify(value));
},
get : function(name) {
var str = $window.localStorage.getItem(name);
var val = {};
try {
val = str ? JSON.parse(str) : {};
}
catch (e) {
console.log('Parse error for localStorage ' + name);
}
return val;
},
clear : function() {
$window.localStorage.clear();
}
};
}
// possibly support other
if (!api) {
throw new Error('Could not find suitable storage');
}
return function(appName, property, scope) {
if (appName === undefined) {
throw new Error('appName is required');
}
var appStorage = appStorages[appName];
var update = function() {
api.set(appName, appStorage);
};
var clear = function() {
api.clear(appName);
};
if (!appStorage) {
appStorage = api.get(appName);
appStorages[appName] = appStorage;
update();
}
var bind = function(property, scope) {
scope[property] = appStorage;
scope.$watch(property, function() {
update();
}, true);
};
if (property !== undefined && scope !== undefined) {
bind(property, scope);
}
return {
get : function(name) {
return appStorage[name];
},
set : function(name, value) {
appStorage[name] = value;
update();
},
clear : clear
};
};
} ]);
appStorage
服务清除属性或存储应用?例如,如果我创建了一个名为FooStorage
的应用,并在其中使用appStorage('FooStorage', 'bar', $scope);
将bar
属性放置在$scope
下,那么我该如何仅清除bar
属性?如果我需要清除整个FooStorage
又该怎么办? - skipvar fooStore = appStorage('FooStorage', 'bar', $scope);
,那么调用fooStore.clear();
不应该清除存储在fooStore
中的所有数据吗?即使在调用fooStore.clear();
后重新加载页面,我仍然可以获取存储的数据。我该如何清除fooStore
中的所有数据?谢谢。 - skip