fix saving to a database example, closes #455

docs/walkthroughs/saving-to-a-database.md

@@ -14,12 +14,12 @@ Let's start with a basic, plain text rendering editor:
 ```js
 import { Editor, Plain } from 'slate'
 
-const initialState = Plain.deserialize('The initial state string!')
+const initialContent = 'The initial string of content!'
 
 class App extends React.Component {
 
   state = {
-    state: initialState
+    state: Plain.deserialize(initialContent)
   }
   
   onChange = (state) => {
@@ -47,20 +47,20 @@ So, in our `onChange` handler, we need to save the `state`. But the `state` argu
 In this case, we're already using the [`Plain`](../reference/serializers/plain.md) serializer to create our intial state, so let's use it to serialize our saved state as well, like so:
 
 ```js
-const initialState = Plain.deserialize('The initial state string!')
+const initialContent = 'The initial string of content!'
 
 class App extends React.Component {
 
   state = {
-    state: initialState
+    state: Plain.deserialize(initialContent)
   }
 
   onChange = (state) => {
     this.setState({ state })
 
     // Save the state to Local Storage.
-    const string = Plain.serialize(state)
+    const content = Plain.serialize(state)
-    localStorage.setItem('content', string)
+    localStorage.setItem('content', content)
   }
 
   render = () => {
@@ -80,23 +80,23 @@ Now whenever you edit the page, if you look in Local Storage, you should see the
 But... if you refresh the page, everything is still reset. That's because we need to make sure the initial state is pulled from that same Local Storage location, like so:
 
 ```js
-// Update the initial value to be pulled from Local Storage.
+// Update the initial content to be pulled from Local Storage if it exists.
-const initialState = (
+const initialContent = (
-  Plain.deserialize(localStorage.getItem('content')) ||
+  localStorage.getItem('content') ||
-  'The initial state string!'
+  'The initial string of content!'
 )
 
 class App extends React.Component {
 
   state = {
-    state: initialState
+    state: Plain.deserialize(initialContent)
   }
 
   onChange = (state) => {
     this.setState({ state })
 
-    const string = Plain.serialize(state)
+    const content = Plain.serialize(state)
-    localStorage.setItem('content', string)
+    localStorage.setItem('content', content)
   }
 
   render = () => {
@@ -118,15 +118,14 @@ However, if you inspect the change handler, you'll notice that it's actually sav
 Instead of using `onChange`, Slate's editor also accepts an `onDocumentChange` convenience handler that you can use to isolate saving logic to only happen when the document itself has changed, like so:
 
 ```js
-const initialState = (
+const initialContent = (
-  Plain.deserialize(localStorage.getItem('content')) ||
+  localStorage.getItem('content') ||
-  'The initial state string!'
+  'The initial string of content!'
 )
-
 class App extends React.Component {
 
   state = {
-    state: initialState
+    state: Plain.deserialize(initialContent)
   }
 
   onChange = (state) => {
@@ -135,8 +134,8 @@ class App extends React.Component {
 
   // Pull the saving logic out into the `onDocumentChange` handler.
   onDocumentChange = (document, state) => {
-    const string = Plain.serialize(state)
+    const content = Plain.serialize(state)
-    localStorage.setItem('content', string)
+    localStorage.setItem('content', content)
   }
 
   render = () => {
@@ -155,12 +154,12 @@ class App extends React.Component {
 
 Now you're content will be saved only when the content itself changes!
 
-Success. But we're only saving plain text strings here. If you're working with rich text, you'll need to serialize the `state` object differently. The easiest option is to just replace calls to `Plain` with `Raw`:
+Success. But we're only saving plain text strings here. If you're working with rich text, you'll need to serialize the `state` object differently. Instead, you can use the `Raw` serializer, and save things in Local Storage as JSON strings, like so:
 
 
 ```js
-const initialState = (
+const initialContent = (
-  Raw.deserialize(localStorage.getItem('content')) ||
+  JSON.parse(localStorage.getItem('content')) ||
   {
     nodes: [
       {
@@ -174,7 +173,7 @@ const initialState = (
 class App extends React.Component {
 
   state = {
-    state: initialState
+    state: Raw.deserialize(initialContent)
   }
 
   onChange = (state) => {
@@ -182,8 +181,9 @@ class App extends React.Component {
   }
 
   onDocumentChange = (document, state) => {
-      // Switch to using the Raw serializer.
+    // Switch to using the Raw serializer.
-    localStorage.setItem('content', Raw.serialize(state))
+    const content = JSON.stringify(Raw.serialize(state))
+    localStorage.setItem('content', content)
   }
 
   render = () => {