如何将状态存储在 mirthril.js 中的 localStorage 中？

Question

我试图在 localStorage 中保持复选框的状态，这是使用 mithril 2.0 的代码，但它不会在 oninit() 之后重绘复选框。

<!doctype html><head>                                                           
<meta name="viewport" content="width=device-width, initial-scale=1.0">          
<script src="//unpkg.com/mithril@next/mithril.min.js"></script>                 
</head>                                                                         
<body>                                                                          
<script>                                                                        
var state = false                                                               
var ConfigPage = {                                                              
  view: function(vnode) {                                                       
    return m('input[type=checkbox]', {                                          
      value: state,                                                             
      onchange: function(e) {                                                   
        state = (e.target.value !== 'true')                                     
        if (localStorage !== undefined) {                                       
          var s = JSON.stringify(state)                                         
          console.log("save state in t1:", s)                                   
          localStorage.setItem('t1', s)                                         
        }                                                                       
      }                                                                         
    })                                                                          
  }                                                                             
}                                                                               
m.mount(document.body, {                                                        
  oninit: function(vnode) {                                                     
    if (localStorage !== undefined) {                                           
      var v = localStorage.getItem("t1")                                        
      if (v !== null) {                                                         
        state = JSON.parse(v)                                                   
        console.log("load state from t1:", v)                                   
      }                                                                                                                                                                                                                                           
    }                                                                           
  },                                                                            
  view: function() {                                                            
    return m(ConfigPage)                                                        
  }                                                                             
})                                                                              
</script>                                                                       
</body></html>

Answer 1

这个问题是由于checked属性设置不当造成的，这里是修改后的代码

<!doctype html><head>                                                           
<meta name="viewport" content="width=device-width, initial-scale=1.0">          
<script src="//unpkg.com/mithril@next/mithril.min.js"></script>                 
</head>                                                                         
<body>                                                                          
<script>                                                                        
var state = false                                                               
var ConfigPage = {                                                              
  view: function(vnode) {                                                       
    return m('input[type=checkbox]', {                                          
      value: state,              
      checked: state,  // ADD THIS                                               
      onchange: function(e) {                                                   
        state = e.target.checked  // use the checked value
        if (localStorage !== undefined) {                                       
          var s = JSON.stringify(state)                                         
          console.log("save state in t1:", s)                                   
          localStorage.setItem('t1', s)                                         
        }                                                                       
      }                                                                         
    })                                                                          
  }                                                                             
}                                                                               
m.mount(document.body, {                                                        
  oninit: function(vnode) {                                                     
    if (localStorage !== undefined) {                                           
      var v = localStorage.getItem("t1")                                        
      if (v !== null) {                                                         
        state = JSON.parse(v)                                                   
        console.log("load state from t1:", v)                                   
      }                                                                                                                                                                                                                                           
    }                                                                           
  },                                                                            
  view: function() {                                                            
    return m(ConfigPage)                                                        
  }                                                                             
})                                                                              
</script>                                                                       
</body></html>

Answer 2

var localstorage = mx.storage('localstorage', mx.LOCAL_STORAGE);

localstorage.set( 'jsonObject' , {} );

<script src="https://unpkg.com/mithril@2.0.0-rc.4/mithril.min.js"></script>
<script src="http://kawan16.github.io/mithril-storage/lib/mithril-storage.js"></script>

如何将状态存储在 mirthril.js 中的 localStorage 中？

How to store status in mirthril.js in localStorage?

javascript

local-storage

mithril.js