javascript - 如何使用 cookie 在输入标签中保存信息

Question

我在网页上有一张桌子。我想使用cookie将信息保存在输入字段中。即我想重新打开我的网页并查看上次打开网页的数据。

HTML

                    <table class="table table-striped" id="table-visual-features">
                        <thead>
                            <tr>
                                <th>Visual Feature</th>
                                <th>Step</th>
                                <th>Output</th>
                                <th>Data Feature</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr><td>x</td> 
                                <td><select><option>first</option></select></td>
                                <td><select><option>output</option></select></td>
                                <td><input name="data-feature_x"  id="value0" class = "feature-execution"/></td>
                           </tr>

                            <tr><td>x</td> 
                                <td><select><option>second</option></select></td>
                                <td><select><option>output</option></select></td>
                                <td><input name="data-feature_x"  id="value1" class = "feature-execution"/></td>
                           </tr>



                            <tr><td>x</td> 
                                <td><select><option>third</option></select></td>
                                <td><select><option>output</option></select></td>
                                <td><input name="data-feature_x"  id="value2" class = "feature-execution"/></td>
                           </tr>



                        </tbody>
                    </table>

Answer 1

您可以使用jQuery Cookie来设置和检索 cookie 的内容。

使用$.cookie.json = true允许您存储 JSON 数据。

Answer 2

代码：

var getValue = function(id){
  return document.querySelector('#'+id).value;
};

var saveCookie = function(){
  document.cookie = '';
  document.cookie += 'a='+getValue('value0');
  document.cookie += 'b='+getValue('value1');
  document.cookie += 'c='+getValue('value2');
};

演示：

http://jsbin.com/IZULuRE/4/edit

当然，为您的使用编辑代码:)，它唯一的演示。