diff --git a/src/images/devtools-storage-chrome.png b/src/images/devtools-storage-chrome.png new file mode 100644 index 0000000000..9271dd57e5 Binary files /dev/null and b/src/images/devtools-storage-chrome.png differ diff --git a/src/images/devtools-storage-edge.png b/src/images/devtools-storage-edge.png new file mode 100644 index 0000000000..d05024b643 Binary files /dev/null and b/src/images/devtools-storage-edge.png differ diff --git a/src/images/devtools-storage.png b/src/images/devtools-storage.png new file mode 100644 index 0000000000..44e2998185 Binary files /dev/null and b/src/images/devtools-storage.png differ diff --git a/src/v2/cookbook/client-side-storage.md b/src/v2/cookbook/client-side-storage.md new file mode 100644 index 0000000000..40296e4273 --- /dev/null +++ b/src/v2/cookbook/client-side-storage.md @@ -0,0 +1,178 @@ +--- +title: Client-Side Storage +type: cookbook +order: 11 +--- + +## Base Example + +Client-side storage is an excellent way to quickly add performance gains to an application. By storing data on the browser itself, you can skip fetching information from the server every time the user needs it. While especially useful when offline, even online users will benefit from using data locally versus a remote server. Client-side storage can be done with [cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies), [Local Storage](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API) (technically "Web Storage"), [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API), and [WebSQL](https://www.w3.org/TR/webdatabase/) (a deprecated method that should not be used in new projects). + +In this cookbook entry we'll focus on Local Storage, the simplest of the storage mechanisms. Local Storage uses a key/value system for storing data. It is limited to storing only simple values but complex data can be stored if you are willing to encode and decode the values with JSON. In general, Local Storage is appropriate for smaller sets of data you would want to persist, things like user preferences or form data. Larger data with more complex storage needs would be better stored typically in IndexedDB. + +Let's begin with a simple form based example: + +``` html +
See the Pen testing localstorage by Raymond Camden (@cfjedimaster) on CodePen.
+ + +Type something in the form and then reload this page. You'll note that the value you typed previously will show up automatically. Don't forget that your browser provides excellent developer tools for inspecting client-side storage. Here's an example in Firefox: + + + +And here it is in Chrome: + + + +And then finally, an example in Microsoft Edge. Note that you can find application storage values under the Debugger tab. + + + ++As a quick aside, these dev tools also offer you a way to remove storage values. This can be very useful when testing. +
+ +Immediately writing the value may not advisable. Let's consider a slightly more advanced example. First, the updated form. + +``` html +See the Pen testing localstorage 2 by Raymond Camden (@cfjedimaster) on CodePen.
+ + +## Working with Complex Values + +As mentioned above, Local Storage only works with simple values. To store more complex values, like objects or arrays, you must serialize and deserialize the values with JSON. Here is a more advanced example that persists an array of cats (the best kind of array possible). + +``` html ++ {{cat}} +
++ + +
+ +See the Pen localstorage, complex by Raymond Camden (@cfjedimaster) on CodePen.
+ + +## Alternative Patterns + +While the Local Storage API is relatively simple, it is missing some basic features that would be useful in many applications. The following plugins wrap Local Storage access and make it easier to use, while also adding functionality like default values. + +* [vue-local-storage](https://github.com/pinguinjkeke/vue-local-storage) +* [vue-reactive-storage](https://github.com/ropbla9/vue-reactive-storage) + +## Wrapping Up + +While the browser will never replace a server persistence system, having multiple ways to cache data locally can be a huge performance boost for your application, and working with it in Vue.js makes it even more powerful. \ No newline at end of file