保存（缓存？）页面的一些值以供将来重新加载答案

【问题标题】：Save (cache?) some values of the page for future reloads保存（缓存？）页面的一些值以供将来重新加载
【发布时间】：2015-07-19 18:30:47
【问题描述】：

假设我的网页中有一个input。当用户输入一个值时，我想保留该值以供将来重新加载页面。就像用户在input 中输入一个值并关闭页面一样，我想在下次用户加载页面时加载该值。做这个的最好方式是什么？

【问题讨论】：

看看Web Storage API。如果你想支持this。虽然出于安全原因不推荐，但您也可以使用cookies。最后，如果您的数据不敏感，您可以使用 location.hash 或 location.query 将信息存储在 url 中并从中解析数据。
@usandfriends 你能写下你的评论作为答案吗？
是的，但请注意，我的评论并未涉及这些 API 的 React 实现。有关该信息，请参阅@Michael 的answer。

标签： reactjs

【解决方案1】：

这是我想出的：

var Foo = React.createClass({
    mixins : [React.addons.LinkedStateMixin],
    getInitialState : function () {
        if (localStorage.getItem('savedText')) {
            return (
                {savedText : localStorage.getItem('savedText')}
            );
        } else {
            return (
                {savedText : ''}
            );
        }
    },
    componentDidUpdate : function () {
        localStorage.setItem('savedText', this.state.savedText);
    },
    render : function () {
        return (
            <div>
                Enter some text, then refresh the page
                <br/>
                <input type='text' valueLink={this.linkState('savedText')} />
            </div>
        );
    }
});

解释：

getInitialState 用于检查 localStorage 中保存的值是否存在。如果是，它将我们的 savedText 状态设置为任何值 - 如果不是，它将状态设置为空字符串。
LinkedStateMixin 确保savedText 状态始终等于输入中的值。所以getInitialState其实是在设置输入的初始值，每次输入值变化，状态都会随之变化。
每次状态更改（因此每次输入中的值更改）时，都会调用componentDidUpdate，它将当前值存储回localStorage。

我选择使用 localStorage，即使浏览器关闭也会保存该值，但如果您只想在页面刷新后保留该值，那么 sessionStorage 也可以正常工作。

这是它的工作演示：http://output.jsbin.com/bayayikipi

【讨论】：