例如：持久化用户名
用户输入用户名，然后我们把用户名保存到浏览器的 LocalStorage 当中，当页面加载的时候再从 LocalStorage 把之前保存的用户名显示到用户名输入框当中。这样用户就不用每次都输入用户名了，用户的输入体验就好很多。
我们监听用户名输入框失去焦点的事件 onBlur：
...
<input
value={this.state.username}
onBlur={this.handleUsernameBlur.bind(this)}
onChange={this.handleUsernameChange.bind(this)} />
...
在 handleUsernameBlur 中我们把用户的输入内容保存到 LocalStorage 当中：
class CommentInput extends Component {
constructor () {
super()
this.state = {
username: '',
content: ''
}
}
componentDidMount () {
this.textarea.focus()
}
_saveUsername (username) {
localStorage.setItem('username', username)
}
handleUsernameBlur (event) {
this._saveUsername(event.target.value)
}
...
在 handleUsernameBlur 中我们把用户输入的内容传给了 saveUsername 私有方法（所有私有方法都以 开头）。_saveUsername 会设置 LocalStorage 中的 username 字段，用户名就持久化了。这样就相当于每当用户输入完用户名以后（输入框失去焦点的时候），都会把用户名自动保存一次。
输入用户名，然后到浏览器里里面看看是否保存了：
然后我们组件挂载的时候把用户名加载出来。这是一种数据加载操作，我们说过，不依赖 DOM 操作的组件启动的操作都可以放在 componentWillMount 中进行，所以给 CommentInput 添加 componentWillMount 的组件生命周期：
...
componentWillMount () {
this._loadUsername()
}
_loadUsername () {
const username = localStorage.getItem('username')
if (username) {
this.setState({ username })
}
}
_saveUsername (username) {
localStorage.setItem('username', username)
}
...
componentWillMount 会调用 _loadUsername 私有方法，_loadUsername 会从 LocalStorage 加载用户名并且 setState 到组件的 state.username 中。那么组件在渲染的时候（render 方法）挂载的时候就可以用上用户名了。
持久化json数组：
....
localStorage.setItem('commentlist',JSON.stringify(CommentList))
.....
let aa =localStorage.getItem('commentlist')
this.setState({
Commentdata:JSON.parse(aa)
})
.....