4

what is $cookies vs localSTorage.


$cookies.myFavorite = 'Steve jobs'; 


localStorage.myFavorite = 'Steve jobs';
Abilash
  • 229
  • 2
  • 3
  • 9
  • 1
    Angular is aware of one and not the other? Be great to hear a little more detail .. – Rob Sedgwick Mar 01 '14 at 15:05
  • See http://stackoverflow.com/questions/5398604/local-storage-session-storage-web-storage-web-database-and-cookies-in-html5 – Myrne Stol Mar 01 '14 at 15:42
  • Thanks @Meryn Stol, but why post that ? seeing no references to Angular on that link – Rob Sedgwick Mar 01 '14 at 18:02
  • Main reason I posted this is because someone else quoted this verbatim, and knowing difference between cookies and localStorage (and other storage options is relevant to the answer). You kind of face a trade-off: Work with cookies with some Angular magic sprinkled on top, or work with `localStorage`. I think by far the most important thing is decide where you want to store stuff, not if you want to use Angular for it or not. – Myrne Stol Mar 01 '14 at 18:29

2 Answers2

3

$cookies is an Angular module that takes browser cookie functions and wraps them in Angular. Cookies have a smaller storage capacity than localStorage (4k as opposed to 5m) and have the ability to be configured to prompt the visitor for use/acceptance each time you try to use one. This can rapidly detiorate the user experience. Cookies are not recommended for long-term storage of information in a browser for exactly these reasons. Cookies also have a reputation among the technologically illiterate for spreading viruses or somehow otherwise being harmful, neither of which are deserved or completely true.

localStorage (and its companion sessionStorage) are somewhat new to the web with the coming of HTML5 and are very useful. While they can be specifically disabled via settings, most browsers come pre-configured with them turned on and you don't need to worry about it. Unlike cookies, there is no way for the user to be prompted each time the browser wants to use these functions. They are either off or on, and there is no in-between. This makes for a much more seamless experience in your web applications.

localStorage is recommended for storing things in the browser that will persist beyond the current session. To remove things in localStorage you have to explicitly clear them via localStorage.removeItem(itemName).

sessionStorage is recommended for storing things that you do not want to persist beyond the current session. This is because sessionStorage is wiped completely clean when the visitor leaves the domain or closes the browser. This makes it an excellent repository for session-based information such as temporary shopping carts, lists of items to compare, etc.

The caveat here is that both cookies and browser storage can be cleared by the individual user and should not be completely relied upon for storage. Your best bet is always database storage that resides on the server.

MBielski
  • 6,628
  • 3
  • 32
  • 43
  • Thanks @MBielsji - thanks for the confirmation that an Angular `$cookie` is an angular wrapper for `document.cookie` – Rob Sedgwick Mar 04 '14 at 16:32
0

$cookies will be overridden and they have a temporary storage.

localStorage have a persistent storage.

Balayesu Chilakalapudi
  • 1,386
  • 3
  • 19
  • 43