Persistent Vue State with Local Storage

State management is crucial in Vue applications, but often data is lost when the user refreshes the page. This challenge focuses on implementing a Vue component that persists its internal state using local storage, ensuring data is retained across page reloads. This is a common requirement for applications needing to remember user preferences, shopping cart contents, or other critical data.

Problem Description

You are tasked with creating a Vue component called PersistentCounter that manages a counter value and persists it to local storage. The component should have a button to increment the counter and a display showing the current counter value. Crucially, when the component is initialized, it should retrieve the counter value from local storage if it exists; otherwise, it should initialize the counter to 0. Upon incrementing the counter, the new value must be saved to local storage.

Key Requirements:

• Initialization: The component must load the counter value from local storage when it's mounted. If no value exists in local storage, it should initialize the counter to 0.
• Persistence: Whenever the counter value is incremented, the new value must be saved to local storage under the key "counterValue".
• Display: The component must display the current counter value.
• Increment Functionality: The component must have a button that, when clicked, increments the counter value.

Expected Behavior:

1. On initial load:
   • If "counterValue" exists in local storage, the counter should be initialized with that value.
   • If "counterValue" does not exist in local storage, the counter should be initialized to 0.
2. Clicking the increment button should:
   • Increase the counter value by 1.
   • Update the displayed counter value.
   • Save the new counter value to local storage under the key "counterValue".
3. Refreshing the page should:
   • Load the last saved counter value from local storage.

Edge Cases to Consider:

• Local storage might be unavailable (e.g., in private browsing mode). Handle this gracefully (e.g., by initializing to 0 and not attempting to save).
• The value stored in local storage might not be a valid number. Handle this gracefully (e.g., by initializing to 0).

Examples

Example 1:

Input: Local storage is empty.
Output: Counter initialized to 0, displayed as 0. Clicking the increment button twice results in the counter displaying 1 and 2, and local storage containing 2. Refreshing the page displays 2.
Explanation: The component initializes to 0, increments correctly, and saves to local storage.

Example 2:

Input: Local storage contains "counterValue": 5.
Output: Counter initialized to 5, displayed as 5. Clicking the increment button once results in the counter displaying 6, and local storage containing 6. Refreshing the page displays 6.
Explanation: The component loads the existing value from local storage, increments correctly, and saves to local storage.

Example 3:

Input: Local storage contains "counterValue": "abc".
Output: Counter initialized to 0, displayed as 0. Clicking the increment button twice results in the counter displaying 1 and 2, and local storage containing 2. Refreshing the page displays 2.
Explanation: The component handles the invalid value in local storage by initializing to 0.

Constraints

• The component must be written in TypeScript.
• Use localStorage for state persistence.
• The counter value must be a number.
• The component should be relatively simple and focused on the state persistence aspect. No complex styling or additional features are required.
• The component should handle potential errors when accessing local storage gracefully.

Notes

• Consider using onMounted lifecycle hook to load the initial value from local storage.
• Use watch to reactively update local storage whenever the counter value changes.
• Remember to check if localStorage is available before attempting to use it. You can check with typeof localStorage !== 'undefined'.
• Error handling is important. Wrap local storage operations in try...catch blocks to prevent the application from crashing if local storage is unavailable or contains invalid data.