How do I store data in local storage using Angularjs

Question

Currently I am using a service to perform an action  namely retrieve data from the server and then store the data on the server itself   Instead of this  I want to put the data into local storage instead of storing it on the server   How do I do this

User · Answer

Use ngStorage For All Your AngularJS Local Storage Needs  Please note that this is NOT a native part of the Angular JS framework   ngStorage  contains two services   localStorage and  sessionStorage  angular module  app         ngStorage     controller  Ctrl   function       scope       localStorage       sessionStorage         Check the Demo

User · Answer

You can use localStorage for the purpose   Steps    add ngStorage min js in your file add ngStorage dependency in your module add  localStorage module in your controller use  localStorage key   value

User · Answer

If you use  window localStorage setItem key value  to store  window localStorage getItem key  to retrieve and  window localStorage removeItem key  to remove  then you can access the values in any page    You have to pass the  window service to the controller  Though in JavaScript  window object is available globally   By using  window localStorage xxXX   the user has control over the localStorage value  The size of the data depends upon the browser  If you only use  localStorage then value remains as long as you use window location href to navigate to other page and if you use  lt a href  location  gt  lt  a gt  to navigate to other page then your  localStorage value is lost in the next page

User · Answer

There is one more alternative module which has more activity than ngStorage  angular-local-storage   https   github com grevory angular-local-storage

User · Answer

Follow the steps to store data in Angular - local storage    Add  ngStorage js  in your folder  Inject  ngStorage  in your angular module      eg  angular module  app      ngStorage      Add  localStorage in your app controller function   4 You can use  localStorage inside your controller   Eg   localstorage login  true    The above will store the localstorage in your browser application

User · Answer

I authored  yet another  angular html5 storage service  I wanted to keep the automatic updates made possible by ngStorage  but make digest cycles more predictable intuitive  at least for me   add events to handle when state reloads are required  and also add sharing session storage between tabs  I modelled the API after  resource and called it angular-stored-object  It can be used as follows     angular      module  auth     yaacovCR storedObject        angular      module  auth        factory  session   session      function session ycr StoredObject        return new ycr StoredObject  session          API is here   Repo is here   Hope it helps somebody

User · Answer

For local storage there is a module for that look at below url   https   github com grevory angular-local-storage  and other link for HTML5 local storage and angularJs   http   www amitavroy com justread content articles html5-local-storage-with-angular-js

User · Answer

One should use a third party script for this called called ngStorage here is a example how to use It updates localstorage with change in scope view        lt  DOCTYPE html gt   lt html gt    lt head lang  en  gt       lt meta charset  UTF-8  gt       lt title gt  lt  title gt       lt  -- CDN Link -- gt       lt  --https   cdnjs cloudflare com ajax libs ngStorage 0 3 6 ngStorage min js-- gt       lt script src  angular min js  gt  lt  script gt       lt script src  ngStorage min js  gt  lt  script gt       lt script gt          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                   lt  script gt   lt  head gt    lt body ng-app  app  ng-controller  Ctrl  gt        lt button ng-click  abcd counter   abcd counter   1  gt   abcd counter   lt  button gt   lt  body gt    lt  html gt

User · Answer

Depending on your needs  like if you want to allow the data to eventually expire or set limitations on how many records to store  you could also look at https   github com jmdobry angular-cache which allows you to define if the cache sits in memory  localStorage  or sessionStorage

User · Answer

this is a bit of my code that stores and retrieves to local storage  i use broadcast events to save and restore the values in the model   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

[angularjs] How do I store data in local storage using Angularjs?

Examples related to angularjs