Use JSON serialization/deserialization by default for LocalStorageSync

LocalStorageSync is a helper that will sync a Vue data variable with localStorage. When the data variable changes, the new value is saved in localStorage, and when the page loads, the value is restored from localStorage.

However, localStorage can only store strings, and will stringify anything passed to it. This means that by default, LocalStorageSync will restore any saved data as strings (because that's what saved in localStorage) unless the as-json prop is set to true, which serializes and deserializes the data as JSON.

Because this component is called local storage sync, the passed value should be restored to the same value, so we should always be serializing the data as JSON. Aside from strings where there's no difference either way, there's no case where we'd want to save a value, but restore the stringified version. For example saving the boolean false should restore the boolean false, not the string 'false'. While this can be done by adding the as-json prop, there are some components that aren't aware of this, don't add the prop, and are inadvertently restoring the string value instead.

This issue is to remove the as-json prop and make JSON serialization/deserialization the default for LocalStorageSync, so that data can be saved and restored properly without needing to add a special prop to do it. However, this will break backwards compatibility for a few components that saves data as strings, so we should also add an as-string prop to preserve backwards compatibility for those components.

Technical details

JSON.stringify and JSON.parse can be used with any of JS' standard data types (string, number, boolean, null, undefined, array, and objects). For backwards compatibility, we don't need to worry about arrays, null, or undefined because no components save those data types, and everywhere an object is saved is already using as-json. Numbers are also serialized as-is, so they're backwards compatible out of the box:

That only leaves string, which is not backwards compatible. Saving a string directly in localStorage will save the raw string, but JSON.stringifying it will wrap it in double-quotes:

Trying to JSON.parse a raw string will throw an error, so this breaks backwards compatibility for strings that are already saved. So we need the as-string attribute to preserve backwards compatibility here.

A summary of the above in video form:

Untitled

Implementation Plan

• Remove the as-json prop and add the as-string prop.
• In every place that uses <local-storage-sync>, remove the as-json prop if it has it.
• In every place that uses <local-storage-sync>, add the as-string prop if what it's saving is a string. This will preserve backwards compatibility.