ขณะนี้ฉันกำลังใช้บริการเพื่อดำเนินการคือเรียกข้อมูลจากเซิร์ฟเวอร์แล้วจัดเก็บข้อมูลบนเซิร์ฟเวอร์เอง
แทนที่จะเป็นเช่นนี้ฉันต้องการวางข้อมูลลงในที่จัดเก็บในตัวเครื่องแทนที่จะเก็บไว้ในเซิร์ฟเวอร์ ฉันจะทำสิ่งนี้ได้อย่างไร
ขณะนี้ฉันกำลังใช้บริการเพื่อดำเนินการคือเรียกข้อมูลจากเซิร์ฟเวอร์แล้วจัดเก็บข้อมูลบนเซิร์ฟเวอร์เอง
แทนที่จะเป็นเช่นนี้ฉันต้องการวางข้อมูลลงในที่จัดเก็บในตัวเครื่องแทนที่จะเก็บไว้ในเซิร์ฟเวอร์ ฉันจะทำสิ่งนี้ได้อย่างไร
คำตอบ:
นี่เป็นรหัสเล็กน้อยของฉันที่จัดเก็บและดึงข้อมูลไปยังที่จัดเก็บในตัวเครื่อง ฉันใช้เหตุการณ์ออกอากาศเพื่อบันทึกและเรียกคืนค่าในรูปแบบ
app.factory('userService', ['$rootScope', function ($rootScope) {
var service = {
model: {
name: '',
email: ''
},
SaveState: function () {
sessionStorage.userService = angular.toJson(service.model);
},
RestoreState: function () {
service.model = angular.fromJson(sessionStorage.userService);
}
}
$rootScope.$on("savestate", service.SaveState);
$rootScope.$on("restorestate", service.RestoreState);
return service;
}]);
sessionStorage≠localStorage
หากคุณใช้$window.localStorage.setItem(key,value)เพื่อจัดเก็บ$window.localStorage.getItem(key)เพื่อดึงและ$window.localStorage.removeItem(key)ลบจากนั้นคุณสามารถเข้าถึงค่าในหน้าใดก็ได้
คุณต้องผ่าน$windowบริการไปยังตัวควบคุม แม้ว่าใน JavaScript windowวัตถุจะสามารถใช้ได้ทั่วโลก
โดยใช้$window.localStorage.xxXX()ผู้ใช้มีการควบคุมlocalStorageค่า ขนาดของข้อมูลขึ้นอยู่กับเบราว์เซอร์ หากคุณใช้$localStorageค่าจะยังคงอยู่ตราบใดที่คุณใช้window.location.hrefเพื่อนำทางไปยังหน้าอื่นและหากคุณใช้<a href="location"></a>เพื่อนำทางไปยังหน้าอื่น$localStorageค่าของคุณจะหายไปในหน้าถัดไป
สำหรับที่จัดเก็บในตัวเครื่องมีโมดูลสำหรับดูที่ด้านล่าง url:
https://github.com/grevory/angular-local-storage
และลิงก์อื่น ๆ สำหรับที่จัดเก็บในตัว HTML5 และ angularJs
http://www.amitavroy.com/justread/content/articles/html5-local-storage-with-angular-js/
ใช้ngStorageสำหรับความต้องการพื้นที่เก็บข้อมูลในเครื่องของคุณทั้งหมด โปรดทราบว่านี่ไม่ใช่ส่วนหนึ่งของ Angular JS framework
ngStorage มีสองบริการ$localStorageและ$sessionStorage
angular.module('app', [
'ngStorage'
]).controller('Ctrl', function(
$scope,
$localStorage,
$sessionStorage
){});
ตรวจสอบการสาธิต
มีอีกหนึ่งโมดูลทางเลือกซึ่งมีกิจกรรมมากกว่า ngStorage
เชิงมุมท้องถิ่นจัดเก็บ:
คุณสามารถใช้localStorageเพื่อวัตถุประสงค์
ขั้นตอน:
ฉันเขียนบริการเก็บข้อมูลเชิงมุม html5 ฉันต้องการให้การอัปเดตอัตโนมัติเป็นไปได้ด้วยngStorageแต่ทำให้รอบการสรุปสามารถคาดเดา / ใช้งานได้ง่ายขึ้น (อย่างน้อยสำหรับฉัน) เพิ่มกิจกรรมเพื่อจัดการเมื่อต้องมีการโหลดซ้ำของรัฐและเพิ่มการจัดเก็บเซสชันร่วมระหว่างแท็บ ผมย่อม API หลังและเรียกมันว่า$resource angular-stored-objectมันสามารถใช้ดังนี้:
angular
.module('auth', ['yaacovCR.storedObject']);
angular
.module('auth')
.factory('session', session);
function session(ycr$StoredObject) {
return new ycr$StoredObject('session');
}
หวังว่ามันจะช่วยให้ใครบางคน!
ทำตามขั้นตอนเพื่อเก็บข้อมูลใน Angular - ที่จัดเก็บในตัวเครื่อง:
ฉีด 'ngStorage' ใน angular.module ของคุณ
eg: angular.module("app", [ 'ngStorage']);$localStorageฟังก์ชั่น app.controller ของคุณ4. คุณสามารถใช้$localStorageภายในตัวควบคุมของคุณ
Eg: $localstorage.login= true;ด้านบนจะจัดเก็บ localstorage ในแอปพลิเคชันเบราว์เซอร์ของคุณ
ขึ้นอยู่กับความต้องการของคุณเช่นถ้าคุณต้องการอนุญาตให้ข้อมูลหมดอายุหรือกำหนดข้อ จำกัด เกี่ยวกับจำนวนเรคคอร์ดที่จะจัดเก็บในที่สุดคุณสามารถดูhttps://github.com/jmdobry/angular-cacheซึ่งช่วยให้คุณกำหนดว่า แคชตั้งอยู่ในหน่วยความจำ localStorage หรือ sessionStorage
หนึ่งควรใช้สคริปต์ของบุคคลที่สามสำหรับสิ่งนี้เรียกว่า ngStorage ที่นี่เป็นตัวอย่างวิธีการใช้มันปรับปรุง localstorage กับการเปลี่ยนแปลงในขอบเขต / มุมมอง
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- CDN Link -->
<!--https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.6/ngStorage.min.js-->
<script src="angular.min.js"></script>
<script src="ngStorage.min.js"></script>
<script>
var app = angular.module('app', ['ngStorage']);
app.factory("myfactory", function() {
return {
data: ["ram", "shyam"]
};
})
app.controller('Ctrl', function($scope, $localStorage, $sessionStorage, myfactory) {
$scope.abcd = $localStorage; //Pass $localStorage (or $sessionStorage) by reference to a hook under $scope
// Delete from Local Storage
//delete $scope.abcd.counter;
// delete $localStorage.counter;
// $localStorage.$reset(); // clear the localstorage
/* $localStorage.$reset({
counter: 42 // reset with default value
});*/
// $scope.abcd.mydata=myfactory.data;
});
</script>
</head>
<body ng-app="app" ng-controller="Ctrl">
<button ng-click="abcd.counter = abcd.counter + 1">{{abcd.counter}}</button>
</body>
</html>