Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsFor a modest AngularJS application, persist the data users need to recover—not every field used to render the current screen. Keep durable values in application state, rebuild temporary presentation fields when the app starts, and serialize the durable data to localStorage. Add a backend when users need shared, remote, or recoverable data; local browser storage alone does not provide those capabilities.
What belongs in persistent state?
Separate the application’s durable data from transient presentation state. Durable data is information the user expects to survive a reload, such as entries in a weekly log. Presentation state exists to display or interact with that data, such as whether a section is expanded, a formatted date string, or a temporary array prepared for rendering.
Peter Bengtsson’s SitePoint example marks temporary fields with leading underscores, including _expanded, _date, and _days, then removes them before saving. That naming convention is an example, not an AngularJS requirement. For a complex model, explicitly project the durable fields you intend to store so a naming mistake cannot omit meaningful data or persist unintended values. SitePoint’s AngularJS persistence example was published December 29, 2015, and its page shows an update date of November 11, 2024.
How the localStorage example works
The pattern has three parts: restore saved JSON at startup, reconstruct display-only fields, and save edits after an input loses focus. SitePoint demonstrates this with an editable weekly log. The snippets below show the shape of that flow; adapt the field names and controller structure to your application.
#1 Best Overall
Restore data and prepare the view
var saved = localStorage.getItem('weeks');
$scope.weeks = saved ? angular.fromJson(saved) : [];
if ($scope.weeks.length === 0) {
$scope.weeks.push(makeStarterWeek());
}
$scope.weeks.forEach(function (week) {
week._days = makeDisplayDays(week);
});The stored value is text, so parsing turns it back into JavaScript data. If there are no saved entries, the example starts with a starter week. It then rebuilds the temporary display structure instead of treating that structure as durable data.
Copy edits into durable data and save
In the example, an input’s ng-blur handler copies the edited day values from the display structure into the durable week data, removes temporary properties from the object being saved, and writes JSON to storage. Saving on blur avoids a write for every keystroke, but it means an edit is not saved until the field loses focus. If you need stronger recovery guarantees, choose a save trigger and error-handling policy that fit that requirement.
<input ng-model="day.value" ng-blur="saveWeek(week)">AngularJS’s angular.toJson is often preferable to plain JSON.stringify in an AngularJS application: its documented behavior omits properties beginning with $$, which AngularJS uses internally. This addresses framework-added properties such as $$hashKey; it does not decide which of your own application fields should be persisted. AngularJS API: angular.toJson
Make a deliberate copy before serialization
SitePoint describes its array-and-Object.assign operation as a deep copy, but that operation copies the array and makes shallow copies of its items. Nested objects remain shared references. If you delete temporary properties from those shallow copies, you may still mutate the live nested objects; if nested data changes, the saved result may also reflect mutations you did not intend to include.
For simple models, construct a new object containing only the durable fields and serialize that projection. For nested models, project nested objects too, or choose a suitable deep-copy approach and verify how it handles the values your application uses. Serialization itself is not a substitute for deciding the storage schema.
Choose storage by lifetime and scope
| Option | Lifetime and scope | Use it when |
|---|---|---|
localStorage |
Origin-scoped; data remains when the browser closes and reopens. | The app should restore modest browser-local state across reloads and browser restarts. |
sessionStorage |
Origin- and tab-scoped; data is cleared when that tab closes. | State should survive reloads within a tab session but not be retained after the tab is closed. |
| Backend synchronization | Can support remote persistence and sharing, depending on the service and application design. | Users need data beyond one browser’s local storage, such as shared access or remote recovery. |
Web Storage is shared by pages at the same origin, not automatically by different origins or devices. MDN also notes that both localStorage and sessionStorage operations are synchronous: reads and writes block JavaScript while they complete. That makes them straightforward for modest data, but large values or frequent writes can interfere with responsiveness. MDN: Web Storage API
Rank #4
- Used Book in Good Condition
When a backend changes the design
A backend is not merely a larger place to store the same browser object. Once it becomes the synchronization layer, decide what the client sends, when it sends it, how conflicting edits are handled, and what the interface does when the service is unavailable. Sending a whole large state object for every small edit can be wasteful; the SitePoint example points instead toward sending only the changed day when that is appropriate.
- Local-only state: Keep the browser flow simple when one browser and one origin meet the recovery requirement.
- Remote recovery or multiple devices: Add remote persistence and define how local and remote versions reconcile.
- Shared or collaborative data: Plan for selective updates, concurrent edits, and conflict resolution rather than assuming a local save pattern will handle them.
- Offline-first behavior: Treat local persistence and eventual server synchronization as separate responsibilities, including a plan for retrying and recovering unsent changes.
The SitePoint article names Kinto, PouchDB, and Firebase as examples in its discussion. Those names are historical examples in that article, not evaluations of their current availability, features, or suitability.
Is this realistic, and does it scale?
For a small application with a clear durable-data model, restoring JSON from browser storage and rebuilding the view is a realistic architecture. Whether it scales depends on the data volume, write frequency, number of users and devices, and the synchronization guarantees the product needs. Bengtsson’s closing “Does it scale? Yes, it does” is the author’s opinion about the demonstrated architecture, not a measured benchmark or a guarantee for every AngularJS application.
The underlying architectural choice is to keep the front end responsible for useful application behavior while a backend, when needed, handles persistence and synchronization. It is not a general rule that every application should move all business logic into the client: security-sensitive rules, shared invariants, and operations that must be authoritative across users may require server-side enforcement.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
