在重新加载页面上，我丢失了使用用户输入创建的 kendo 网格数据

Question

这是我的 HTML 文件 -- 带有用于创建用户的创建按钮的简单表单

<html>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>
<base href="https://demos.telerik.com/kendo-ui/dialog/predefined-dialogs">
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
<script src="aza.js"></script>
<link href="kendo.html">
<link href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default.min.css" rel="stylesheet" />

<h3> ADD USER</h3>
<dl>
    <dt>FirstName</dt>
    <dd>
        <input type="text" id="inputtext3">
    </dd>
    <dt>LastName</dt>
    <dd>
        <input type="text" id="inputtext4">
    </dd>
    <dt>Age</dt>
    <dd>
        <input type="text" id="inputtext5">
    </dd>
    <dd>
        <button id="add"> Create </button>
    </dd>
</dl>
<div id="grid">
    <table id="weapons">
        <tr>
            <th data-field="firstname">FirstName</th>

            <th data-field="lastname">LastName</th>

            <th data-field="age">Age</td>

        </tr>

    </table>
</div>

</html>

这是我的 JS -- 在创建按钮上将数据绑定到 KENDO 网格，但问题是在重新加载页面时丢失数据

  app.controller('aza', function() {
     $(function() {

        var Weapon = kendo.data.Model.define({

        id: "firstname"

        })
        dataSource = new kendo.data.DataSource({
        transport: {
         read: {
            dataType: "json"
         } ,
         create : {
            dataType: "json",type: "POST"
         } 

        },

        pageable: {
            refresh : true
        },
        schema : {
            model : Weapon}

        });
        $("#weapons").kendoGrid({

            dataSource : dataSource
        });

         $("#add").click(function(){
            dataSource.add({  firstname : $("#inputtext3").val(),lastname: $("#inputtext4").val(),age: $("#inputtext5").val() });
            dataSource.sync();
            $("#inputtext3").val('');
            $("#inputtext4").val('');
            $("#inputtext5").val('');
            $('#weapons').data('kendoGrid').dataSource.read(); 

    $('#weapons').data('kendoGrid').refresh(); 

        })
        });

    });

我想在重新加载页面时通过输入数据保留，第二件事我如何才能仅在其他 html 页面中显示相同的数据

Answer 1

要在页面重新加载之间保留数据，您可以使用 localStorage 或 sessionStorage。
两者使用相同的 API ，它们之间的区别是 sessionStorage 对象只存储一个会话的数据（当浏览器选项卡关闭时数据被删除）和 localStorage 对象存储没有有效期的数据。

例子

// Store value
localStorage.setItem("inputtext3", $("#inputtext3").val(''));
// Retrieve value
$("#inputtext3").val(localStorage.getItem("inputtext3"))

在重新加载页面上，我丢失了使用用户输入创建的 kendo 网格数据

On reload page I am losing the kendo grid data which I am creating using user-input

javascript

kendo-ui

例子