保存（緩存？）頁面的一些值以供將來重新加載

假設我在我的網頁中有一個input。當一個用戶輸入一個值時，我想保留這個頁面未來重新加載的值。就像如果使用在input中輸入一個值並關閉頁面一樣，我希望在下次用戶加載頁面時加載該值。做這個的最好方式是什麼？保存（緩存？）頁面的一些值以供將來重新加載

來源

2015-07-19 Daniel

看看在[Web存儲API（http://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API ）。如果你想支持 usandfriends

@usandfriends能否將您的評論寫爲答案？ – Daniel

是的，但作爲一個說明，我的評論並沒有通過這些API的React實現。有關該信息，請參閱@ Michael的[answer]（http://stackoverflow.com/a/31518822/2006429）。 – usandfriends

這裏是我想出了：

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

來源

2015-07-20 14:14:19

保存（緩存？）頁面的一些值以供將來重新加載

回答

相關問題