cookbook entry for storage #1550

cfjedimaster · 2018-03-31T16:36:59Z

First draft for a new cookbook entry. I did not optimize the image as I saw the other images were pretty big too. That feels wrong, but I wanted to be consistent. :)

sdras · 2018-04-05T16:35:01Z

src/v2/cookbook/client-side-storage.md

+
+## 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). 


great job linking off to further documentation 👍

sdras · 2018-04-05T16:36:19Z

src/v2/cookbook/client-side-storage.md

+    if(localStorage.name) this.name = localStorage.name;
+  },
+  watch:{
+    name(newName,oldName) {


I wouldn't include the second param here if it's going to remain unused.

Normally I'd agree - but do you think it's worthwhile keeping it there just as a reminder of the watch API in general?

No, I don't think so. You can link to the api section of the docs for details like this along with an explanation for clarity. If you wouldn't write the function in this manner for this example, I'd remove it because it makes it more complex and thus, harder to understand at a glance, even if only slightly.

Ok - fair enough. Removed (and the codepen was edited as well).

sdras · 2018-04-05T16:40:53Z

This looks very clean! I did an initial pass, I need another day or so and I'll test out all the examples and continue the review. Thank you so much Raymond.

sdras · 2018-05-12T23:17:39Z

src/v2/cookbook/client-side-storage.md

+});
+```
+
+Focus on the `mounted` and `watch` parts. We use `mounted` to handle loading the value from local storage. To handle writing the data base, we simply watch the `name` value and on change, immediately write it. 


local storage should probably be localStorage and data base should be database. Please also remove "simply" (it's a hard habit to break): http://bradfrost.com/blog/post/just/

we also use a space after the colon in the docs, i.e. watch: {...

sdras · 2018-05-12T23:19:33Z

src/v2/cookbook/client-side-storage.md

+
+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. 
+
+![Storage devtools in Firefox](/images/devtools-storage.png)


Do you think it would be worth showing them for Chrome as well? Many developers use Chrome so it may make the post more valuable to them.

I was very intentionally trying not to use Chrome as I feel like Firefox needs more attention. :) I can absolutely add another screen shot, but to me, it feels like overkill. I will do as you ask though if you feel strongly about this. :)

I guess Firefox can use the attention but Chrome is more useful to people reading this. I'm not sure our job is to force adoption in browsers, it's rather our job to make it easy for people to work with the content. I'm not going to push you on it, it's fine as is. But the idea about writing technical content in the first place, IMO, is meeting people where they are to help them learn. If I was reading through this, I would then have to go research how to do this in Chrome.

I'm not sure I agree completely - but it is will also take me a grand total of ten seconds or so to include a shot of Chrome too. And heck, I can do Edge too (although I need to see if they finally added support for storage inspection.)

Nice :) thank you

sdras · 2018-05-12T23:24:09Z

src/v2/cookbook/client-side-storage.md

+})
+```
+
+As before, `mounted` is used to load persisted data, if it exists. This time though data is only persisted when the button is clicked. This would also be where you could do any validations or transformations before storing the value. You could also store a date representing when the values were stored. With that metadata, the `mounted` method could make a logical call on whether it makes to restore the values. You can try this version below.


there's a missing comma: This time, though, data is only...

The second sentence is a bit awkward, how about "We could also do any validations or transformations here before storing the value."

Also: "With that metadata, the mounted method could make a logical call on whether or not to store the values again, such as in this version below"

sdras

This is looking good! I tested out your examples, and they look good but there are small bits of the description that could read just a little better, all addressed in the comments.

One other thing that might be worth mentioning to people is how to delete things from storage in devtools when they are debugging or even just a mention that since it's in localstorage, they will have to manually delete it in order to retest it. Perhaps in a tip or something :)

p.s. Not all of my comments are in the review, sorry about that, I initially hit submit a comment out of muscle memory.

sdras · 2018-05-12T23:30:58Z

src/v2/cookbook/client-side-storage.md

+
+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. 


I'm not sure everyone would consider an array complex data, so it might be better to be more specific here- "It would be better to store data structures such as objects or arrays in something like IndexedDB" for example

sdras · 2018-05-12T23:33:03Z

src/v2/cookbook/client-side-storage.md

+<p data-height="265" data-theme-id="0" data-slug-hash="qoYbyW" data-default-tab="js,result" data-user="cfjedimaster" data-embed-version="2" data-pen-title="localstorage, complex" class="codepen">See the Pen <a href="https://codepen.io/cfjedimaster/pen/qoYbyW/">localstorage, complex</a> by Raymond Camden (<a href="https://codepen.io/cfjedimaster">@cfjedimaster</a>) on <a href="https://codepen.io">CodePen</a>.</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+
+## Alternative Patterns


I like this alternative patterns section but it might be nice to have a wrapping up section.

Query - would that go before or after the Alternative Patterns?

"Wrapping up" is just a sentence or two at the end, after the Alternative Patterns section

cfjedimaster · 2018-05-14T01:31:10Z

Thank you for the review! As an FYI, I'm traveling out of country this week so I may be a bit slow to respond.

cfjedimaster · 2018-05-16T12:44:38Z

I've made the changes requested, except for the one item I disagreed on (although not strongly), the tip about removing/clearing local storage, and the last item.

For the tip - I agree - but is there a standard markup for the site I should use to denote the tip?

sdras · 2018-05-16T15:27:09Z

Thank you Raymond! Tips use <p class="tip"></p>

cfjedimaster · 2018-05-16T19:02:42Z

Everything should be addressed. I really don't like my wrap up - but hopefully it is good enough. ;) As a reminder, I did not optimize the images as I figured that would be done by yall, but if you want me to resize them and re-commit them, just say the word.

sdras · 2018-05-18T20:04:38Z

src/v2/cookbook/client-side-storage.md

+* [vue-local-storage](https://github.com/pinguinjkeke/vue-local-storage)
+* [vue-reactive-storage](https://github.com/ropbla9/vue-reactive-storage)
+
+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.


This should literally be an h2, like ## Wrapping Up

sdras · 2018-05-18T20:05:37Z

Hi! We're so close. We just need that h2 in there, and yes, please optimize the images- I'm not sure historically why the others aren't optimized, but they should be. Once those two things are addressed, we're good to merge! 🍻

cfjedimaster · 2018-05-18T20:08:54Z

Changes made.

sdras · 2018-05-18T21:08:36Z

Argh! Please forgive me, I just noticed that your order is 10 and we already have a 10, your entry would have to be 11. THEN we can merge.

cfjedimaster · 2018-05-18T21:17:01Z

Done - and I quit. :p

sdras · 2018-05-18T21:42:51Z

You're a hero, Raymond. Thanks for all of your hard work getting this in.

cfjedimaster · 2018-05-18T22:02:30Z

Glad to help the Vue cause! :)

@sdras

* Update unit-testing-vue-components.md (vuejs#1623) * Fixed a typo (vuejs#1625) Removed an extra 's' to fix a grammatical mistake * fix a typo (vuejs#1627) * Update v-for list example (vuejs#1628) * Add presentation role to style-only li item * fix: code snippet language (close vuejs#1617) (vuejs#1626) * Update todo-list-example for a11y (vuejs#1630) * Update todo-list-example for a11y * Implement review suggestions * Use explicit label instead of aria-label * Move v-model directive to top for improved readability * change NODE_ENV to follow recommendations from webpack (vuejs#1622) * change NODE_ENV to follow recommendations from weback * Update deployment.md * note that modes are not available in transition groups, fixes vuejs#1619 * add examples for in API doc * add comparison note about react-like libraries * Update components.md (vuejs#1632) * Update components.md * Update components.md * improve flow of single root component section * cookbook entry for storage (vuejs#1550) * cookbook entry for storage * minor tweak * updates to article * updates to article * maybe the last tweak * the honest to god really last mod * Update index.md (vuejs#1634) * docs(guide/comparison): correct size stat of Angular CLI project (vuejs#1638) * Update client-side-storage.md (vuejs#1640) * Update creating-custom-scroll-directives.md (vuejs#1639) * chore: update ad code * remove unnecessary word 'know' (vuejs#1641) * Updated broken links for the Vue Test Utils documentation. (vuejs#1643) * Reorganize component props to introduce prop types earlier, fixes vuejs#1644 (vuejs#1646) @BlitZz96 brought up a good point in [this issue](vuejs#1644) about users lacking the necessary background knowledge to fully understand Passing Static and Dynamic Props, at least as it relates to booleans and potentially other types in the future. To fix this, I added a new Prop Types section right before it. * First stab at SFC to npm documentation (vuejs#1558) * First stab at SFC to npm documentation * Clean up sample code, clarify .vue usage with SSR builds * Run build tasks in parallel, fix dependency order * Backtick all instances of .vue, minor edits for clarity * Fix typo on link * Update url to vue-sfc-rollup utility in acknowledgements * Fix order, other edits suggested by @sdras * Additional explanation about sfc-to-npm recipe package.json * Rename packaing-sfc-for-npm.md to packaging-sfc-for-npm.md (vuejs#1652) * Update link in comparison guide (vuejs#1653) The phrase "These state management patterns and even Redux itself can be easily integrated into Vue applications" has a link to a deprecated project. Instead I link to a yarnpkg.com search I saw used in https://vuejs.org/v2/guide/state-management.html, which links all "redux vue" projects (so it's always up to date) * chore: update vue version * Fix link to docs on custom inputs (vuejs#1660) The old link redirected me to https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components which was unexpected. I think the correct link is https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components as per this change. * correct wrong link (vuejs#1661) * Update events.md correct wrong link * Update events.md correct wrong link * Feature/vuemeetups (vuejs#1665) * feature: Add link to VueMeetups * feature: Add section on becoming a community leader * minor tweaks to meetup section * Added details about Lifecycle Hooks (vuejs#1664) * Added details about Lifecycle Hooks Mostly a clarification for beginners without prior knowledge about what Lifecycle hooks are. Makes it easier to understand when perhaps only knowing that the developer has a `mounted()` hook. I left out the function syntax because of generality. Add if it makes more sense to add. I am not fully knowledgable in Vue yet. * add (de)activated to lifecycle hooks list in style guide * improve comparisons react scaling down section * add text versions of image code examples * remove extra comma in components * TypeScript project generation in @vue/cli 3.0 (vuejs#1668) * TypeScript project generation in @vue/cli 3.0 update information about generating TypeScript project using new @vue/cli 3.0 * tweaks to Vue CLI 3 TypeScript support docs * chore: update sponsors * Sylvain and Forresst feedbacks Signed-off-by: MachinisteWeb <[email protected]> * @ForrestT and @raisonblue feedback Signed-off-by: MachinisteWeb <[email protected]> * Feedback of @rspt Signed-off-by: MachinisteWeb <[email protected]>

@sdras

* Update unit-testing-vue-components.md (vuejs#1623) * Fixed a typo (vuejs#1625) Removed an extra 's' to fix a grammatical mistake * fix a typo (vuejs#1627) * Update v-for list example (vuejs#1628) * Add presentation role to style-only li item * fix: code snippet language (close vuejs#1617) (vuejs#1626) * Update todo-list-example for a11y (vuejs#1630) * Update todo-list-example for a11y * Implement review suggestions * Use explicit label instead of aria-label * Move v-model directive to top for improved readability * change NODE_ENV to follow recommendations from webpack (vuejs#1622) * change NODE_ENV to follow recommendations from weback * Update deployment.md * note that modes are not available in transition groups, fixes vuejs#1619 * add examples for in API doc * add comparison note about react-like libraries * Update components.md (vuejs#1632) * Update components.md * Update components.md * improve flow of single root component section * cookbook entry for storage (vuejs#1550) * cookbook entry for storage * minor tweak * updates to article * updates to article * maybe the last tweak * the honest to god really last mod * Update index.md (vuejs#1634) * docs(guide/comparison): correct size stat of Angular CLI project (vuejs#1638) * Update client-side-storage.md (vuejs#1640) * Update creating-custom-scroll-directives.md (vuejs#1639) * chore: update ad code * remove unnecessary word 'know' (vuejs#1641) * Updated broken links for the Vue Test Utils documentation. (vuejs#1643) * Reorganize component props to introduce prop types earlier, fixes vuejs#1644 (vuejs#1646) @BlitZz96 brought up a good point in [this issue](vuejs#1644) about users lacking the necessary background knowledge to fully understand Passing Static and Dynamic Props, at least as it relates to booleans and potentially other types in the future. To fix this, I added a new Prop Types section right before it. * First stab at SFC to npm documentation (vuejs#1558) * First stab at SFC to npm documentation * Clean up sample code, clarify .vue usage with SSR builds * Run build tasks in parallel, fix dependency order * Backtick all instances of .vue, minor edits for clarity * Fix typo on link * Update url to vue-sfc-rollup utility in acknowledgements * Fix order, other edits suggested by @sdras * Additional explanation about sfc-to-npm recipe package.json * Rename packaing-sfc-for-npm.md to packaging-sfc-for-npm.md (vuejs#1652) * Update link in comparison guide (vuejs#1653) The phrase "These state management patterns and even Redux itself can be easily integrated into Vue applications" has a link to a deprecated project. Instead I link to a yarnpkg.com search I saw used in https://vuejs.org/v2/guide/state-management.html, which links all "redux vue" projects (so it's always up to date) * chore: update vue version * Fix link to docs on custom inputs (vuejs#1660) The old link redirected me to https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components which was unexpected. I think the correct link is https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components as per this change. * correct wrong link (vuejs#1661) * Update events.md correct wrong link * Update events.md correct wrong link * Feature/vuemeetups (vuejs#1665) * feature: Add link to VueMeetups * feature: Add section on becoming a community leader * minor tweaks to meetup section * Added details about Lifecycle Hooks (vuejs#1664) * Added details about Lifecycle Hooks Mostly a clarification for beginners without prior knowledge about what Lifecycle hooks are. Makes it easier to understand when perhaps only knowing that the developer has a `mounted()` hook. I left out the function syntax because of generality. Add if it makes more sense to add. I am not fully knowledgable in Vue yet. * add (de)activated to lifecycle hooks list in style guide * improve comparisons react scaling down section * add text versions of image code examples * remove extra comma in components * TypeScript project generation in @vue/cli 3.0 (vuejs#1668) * TypeScript project generation in @vue/cli 3.0 update information about generating TypeScript project using new @vue/cli 3.0 * tweaks to Vue CLI 3 TypeScript support docs * chore: update sponsors * Sylvain and Forresst feedbacks Signed-off-by: MachinisteWeb <[email protected]> * chore: update sponsors * update CLI docs link * add Scrimba links for preview * @ForrestT and @raisonblue feedback Signed-off-by: MachinisteWeb <[email protected]> * Feedback of @rspt Signed-off-by: MachinisteWeb <[email protected]> * Fix example indentation in the Unit Testing Vue Components recipe (vuejs#1683) * Update debugging-in-vscode.md (vuejs#1662) * Added link to vuemeetups.org to the ecosystem drop-down menu on website. (vuejs#1685) * Correct mistake of Migration from Vue 1.x (vuejs#1686) * Fix code style in Form Validation recipe (vuejs#1682) * Fix code style in Form Validation recipe * More style code slight improvement in Form Validation recipe * Fix code style in Client-Side Storage recipe (vuejs#1690) * [Doc EN]: `typescript.md` (vuejs#1679) * New in with + symbol Signed-off-by: Bruno Lesieur <[email protected]> * Review of 2.5.0 doc Signed-off-by: Bruno Lesieur <[email protected]> * Review Signed-off-by: Bruno Lesieur <[email protected]> * Fix syntax typo Signed-off-by: Bruno Lesieur <[email protected]> * Add space between new line of documentation Signed-off-by: MachinisteWeb <[email protected]> * Add @posva review Signed-off-by: MachinisteWeb <[email protected]> * Add french str Signed-off-by: MachinisteWeb <[email protected]> * Change directeur to director Signed-off-by: MachinisteWeb <[email protected]> * Fix EN doc Signed-off-by: MachinisteWeb <[email protected]> * Subtitle for typescript.md Signed-off-by: MachinisteWeb <[email protected]> * Revert instance.md Signed-off-by: MachinisteWeb <[email protected]> * [cookbook] Dockerize Vue.js App (vuejs#1483) * First draft with 'Simple Example' section * Fix typo on Docker 'build' command * Fix copy of multiple files * Remove unnecessary whitespace * Fix typo in webpack template link * First draft of 'Real-World Example' * Update 'Real-World Example' with multi-stage build * Add 'Why Dockerize a Vue.js App?' section * Rename 'Why Dockerize a Vue.js App?' as 'Additinal Context' * Add 'Alternative Patterns' section * Minor fix on 'Alternative Patterns' * Fixed typo * Update order to avoid collision with other cookbooks * Clarify why NGINX in real-world example * Update debugging-in-vscode.md (vuejs#1663) * remove outdated information about polymer from comparison * update React comparison status * Remove extra part Signed-off-by: Haeresis <[email protected]> * Remove extra content from api/index.md Signed-off-by: Haeresis <[email protected]> * Remove extra merge Signed-off-by: Haeresis <[email protected]>

@sdras

* Update unit-testing-vue-components.md (vuejs#1623) * Fixed a typo (vuejs#1625) Removed an extra 's' to fix a grammatical mistake * fix a typo (vuejs#1627) * Update v-for list example (vuejs#1628) * Add presentation role to style-only li item * fix: code snippet language (close vuejs#1617) (vuejs#1626) * Update todo-list-example for a11y (vuejs#1630) * Update todo-list-example for a11y * Implement review suggestions * Use explicit label instead of aria-label * Move v-model directive to top for improved readability * change NODE_ENV to follow recommendations from webpack (vuejs#1622) * change NODE_ENV to follow recommendations from weback * Update deployment.md * note that modes are not available in transition groups, fixes vuejs#1619 * add examples for in API doc * add comparison note about react-like libraries * Update components.md (vuejs#1632) * Update components.md * Update components.md * improve flow of single root component section * cookbook entry for storage (vuejs#1550) * cookbook entry for storage * minor tweak * updates to article * updates to article * maybe the last tweak * the honest to god really last mod * Update index.md (vuejs#1634) * docs(guide/comparison): correct size stat of Angular CLI project (vuejs#1638) * Update client-side-storage.md (vuejs#1640) * Update creating-custom-scroll-directives.md (vuejs#1639) * chore: update ad code * remove unnecessary word 'know' (vuejs#1641) * Updated broken links for the Vue Test Utils documentation. (vuejs#1643) * Reorganize component props to introduce prop types earlier, fixes vuejs#1644 (vuejs#1646) @BlitZz96 brought up a good point in [this issue](vuejs#1644) about users lacking the necessary background knowledge to fully understand Passing Static and Dynamic Props, at least as it relates to booleans and potentially other types in the future. To fix this, I added a new Prop Types section right before it. * First stab at SFC to npm documentation (vuejs#1558) * First stab at SFC to npm documentation * Clean up sample code, clarify .vue usage with SSR builds * Run build tasks in parallel, fix dependency order * Backtick all instances of .vue, minor edits for clarity * Fix typo on link * Update url to vue-sfc-rollup utility in acknowledgements * Fix order, other edits suggested by @sdras * Additional explanation about sfc-to-npm recipe package.json * Rename packaing-sfc-for-npm.md to packaging-sfc-for-npm.md (vuejs#1652) * Update link in comparison guide (vuejs#1653) The phrase "These state management patterns and even Redux itself can be easily integrated into Vue applications" has a link to a deprecated project. Instead I link to a yarnpkg.com search I saw used in https://vuejs.org/v2/guide/state-management.html, which links all "redux vue" projects (so it's always up to date) * chore: update vue version * Fix link to docs on custom inputs (vuejs#1660) The old link redirected me to https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components which was unexpected. I think the correct link is https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components as per this change. * correct wrong link (vuejs#1661) * Update events.md correct wrong link * Update events.md correct wrong link * Feature/vuemeetups (vuejs#1665) * feature: Add link to VueMeetups * feature: Add section on becoming a community leader * minor tweaks to meetup section * Added details about Lifecycle Hooks (vuejs#1664) * Added details about Lifecycle Hooks Mostly a clarification for beginners without prior knowledge about what Lifecycle hooks are. Makes it easier to understand when perhaps only knowing that the developer has a `mounted()` hook. I left out the function syntax because of generality. Add if it makes more sense to add. I am not fully knowledgable in Vue yet. * add (de)activated to lifecycle hooks list in style guide * improve comparisons react scaling down section * add text versions of image code examples * remove extra comma in components * TypeScript project generation in @vue/cli 3.0 (vuejs#1668) * TypeScript project generation in @vue/cli 3.0 update information about generating TypeScript project using new @vue/cli 3.0 * tweaks to Vue CLI 3 TypeScript support docs * chore: update sponsors * chore: update sponsors * update CLI docs link * add Scrimba links for preview * Fix example indentation in the Unit Testing Vue Components recipe (vuejs#1683) * Update debugging-in-vscode.md (vuejs#1662) * Added link to vuemeetups.org to the ecosystem drop-down menu on website. (vuejs#1685) * Correct mistake of Migration from Vue 1.x (vuejs#1686) * Fix code style in Form Validation recipe (vuejs#1682) * Fix code style in Form Validation recipe * More style code slight improvement in Form Validation recipe * Fix code style in Client-Side Storage recipe (vuejs#1690) * [Doc EN]: `typescript.md` (vuejs#1679) * New in with + symbol Signed-off-by: Bruno Lesieur <[email protected]> * Review of 2.5.0 doc Signed-off-by: Bruno Lesieur <[email protected]> * Review Signed-off-by: Bruno Lesieur <[email protected]> * Fix syntax typo Signed-off-by: Bruno Lesieur <[email protected]> * Add space between new line of documentation Signed-off-by: MachinisteWeb <[email protected]> * Add @posva review Signed-off-by: MachinisteWeb <[email protected]> * Add french str Signed-off-by: MachinisteWeb <[email protected]> * Change directeur to director Signed-off-by: MachinisteWeb <[email protected]> * Fix EN doc Signed-off-by: MachinisteWeb <[email protected]> * Subtitle for typescript.md Signed-off-by: MachinisteWeb <[email protected]> * Revert instance.md Signed-off-by: MachinisteWeb <[email protected]> * [cookbook] Dockerize Vue.js App (vuejs#1483) * First draft with 'Simple Example' section * Fix typo on Docker 'build' command * Fix copy of multiple files * Remove unnecessary whitespace * Fix typo in webpack template link * First draft of 'Real-World Example' * Update 'Real-World Example' with multi-stage build * Add 'Why Dockerize a Vue.js App?' section * Rename 'Why Dockerize a Vue.js App?' as 'Additinal Context' * Add 'Alternative Patterns' section * Minor fix on 'Alternative Patterns' * Fixed typo * Update order to avoid collision with other cookbooks * Clarify why NGINX in real-world example * Update debugging-in-vscode.md (vuejs#1663) * remove outdated information about polymer from comparison * update React comparison status * chore: adjust sponsor placement * chore: sponsor meta * adjust sponsor naming on pages * Add alt text to images to help with screen reader accessibility (vuejs#1676) * chore: update sponsors * chore: add tidelift

cookbook entry for storage

6735d36

cfjedimaster mentioned this pull request Apr 3, 2018

Cookbook examples that demonstrate Vue + Client Side storage #1359

Open

sdras added the cookbook label Apr 4, 2018

sdras reviewed Apr 5, 2018

View reviewed changes

minor tweak

6830eb5

sdras reviewed May 12, 2018

View reviewed changes

sdras suggested changes May 12, 2018

View reviewed changes

updates to article

3c67c43

updates to article

11f1cdf

sdras reviewed May 18, 2018

View reviewed changes

maybe the last tweak

3662daa

the honest to god really last mod

678d069

sdras approved these changes May 18, 2018

View reviewed changes

sdras merged commit 28ad8a1 into vuejs:master May 18, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

cookbook entry for storage #1550

cookbook entry for storage #1550

cfjedimaster commented Mar 31, 2018

sdras Apr 5, 2018

sdras Apr 5, 2018

cfjedimaster Apr 5, 2018

sdras Apr 5, 2018

cfjedimaster Apr 5, 2018

sdras commented Apr 5, 2018

sdras May 12, 2018

sdras May 12, 2018

sdras May 12, 2018

cfjedimaster May 16, 2018

sdras May 16, 2018

cfjedimaster May 16, 2018

sdras May 16, 2018

sdras May 12, 2018

sdras left a comment

sdras May 12, 2018

sdras May 12, 2018

cfjedimaster May 16, 2018

sdras May 16, 2018

cfjedimaster commented May 14, 2018

cfjedimaster commented May 16, 2018

sdras commented May 16, 2018

cfjedimaster commented May 16, 2018

sdras May 18, 2018

sdras commented May 18, 2018

cfjedimaster commented May 18, 2018

sdras commented May 18, 2018

cfjedimaster commented May 18, 2018

sdras commented May 18, 2018

cfjedimaster commented May 18, 2018


		## 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).


		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.

		![Storage devtools in Firefox](/images/devtools-storage.png)


		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.

cookbook entry for storage #1550

cookbook entry for storage #1550

Conversation

cfjedimaster commented Mar 31, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sdras commented Apr 5, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sdras left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cfjedimaster commented May 14, 2018

cfjedimaster commented May 16, 2018

sdras commented May 16, 2018

cfjedimaster commented May 16, 2018

Choose a reason for hiding this comment

sdras commented May 18, 2018

cfjedimaster commented May 18, 2018

sdras commented May 18, 2018

cfjedimaster commented May 18, 2018

sdras commented May 18, 2018

cfjedimaster commented May 18, 2018