Question

我正在尝试使用jquery插件在图像上添加一些注释。现在使用我的代码，我可以在任何图像上添加注释并使用表格保存x，y坐标和注释。但问题是当我们刷新页面时，包括表格在内的所有数据都丢失了。任何人都可以帮我使用本地存储代码从我的页面保存表格并在刷新后保留它这是我的完整代码，请忽略代码中的一些javascript插件链接。

      <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">
    <title>Assignment portal</title>
    <style type="text/css" media="all">@import "css/marker.css";</style>

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" media="screen">
    <script type="text/javascript" src="libs/jquery/jquery.js"></script>
    <script type="text/javascript" src="libs/jquery/jquery-ui.js"></script>
    <script type="text/javascript" src="libs/jquery.fs.zoetrope.min.js"></script>
    <script type="text/javascript" src="libs/hammer.min.js"></script>
    <script type="text/javascript" src="libs/jquery.hammer.js"></script>
    <script type="text/javascript" src="libs/jquery.mousewheel.min.js"></script>
    <script type="text/javascript" src="libs/imgViewer.min.js"></script>
    <script type="text/javascript" src="src/imgNotes.js"></script>
    <script type="text/javascript" src="https://github.com/js-cookie/js-cookie/blob/latest/src/js.cookie.js"></script>
    <script type="text/javascript" src="https://github.com/mdn/web-storage-demo/blob/gh-pages/jscolor/jscolor.js"></script>
    <script type="text/javascript" src="https://github.com/mdn/web-storage-demo/blob/gh-pages/main.js"></script>
    <script type="https://github.com/micho/jquery.localStorageTextareas/blob/master/jquery.localStorageTextareas.js"></script>
    <script src="https://github.com/tsironis/lockr/blob/master/lockr.js" type="text/javascript"></script>



    <style type="text/css">
    table.gridtable {
        font-family: verdana,arial,sans-serif;
        font-size:11px;
        color:#333333;
        border-width: 1px;
        border-color: #666666;
        border-collapse: collapse;
    }
    table.gridtable th {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #666666;
        background-color: #dedede;
    }
    table.gridtable td {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #666666;
        background-color: #ffffff;
    }
</style>
</head>
<body>


    <div id="imgdiv" style="text-align: center">
        <img id="image" src="/home/ved/Downloads/imgNotes-master/image/pic2.jpg" style="border: 30px solid #ccc; padding:20px;" width="80%"/>
        <br/>
        <button id="toggleEdit">Edit</button>   <button id="export">Export</button>

    </div>
    <div id=txt></div>

    <div id="result3"></div>

<script type="text/javascript">
 ;(function($) {
    $(document).ready(function() {
        var $img = $("#image").imgNotes();
        var $toggle = $("#toggleEdit");
        if ($img.imgNotes("option","canEdit")) {
            $toggle.text("View");
        } else {
            $toggle.text("Edit");
        }
        $toggle.on("click", function() {
                                    var $this = $(this);
                                    if ($this.text()=="Edit") {
                                        $this.text("View");
                                        $img.imgNotes("option", "canEdit", true);
                                    } else {
                                        $this.text('Edit');
                                        $img.imgNotes('option', 'canEdit', false);
                                    }
        });
        var $export = $("#export");
        $export.on("click", function() {


                                    var $table = $("<table/>").addClass("gridtable");
                                    var notes = $img.imgNotes('export');
                                    $table.append("<th>X</th><th>Y</th><th>NOTE</th>"); 
                                    $.each(notes, function(index, item) {
                                            $table.append("<tr><td>" + item.x + "</td><td>" + item.y + "</td><td>" + item.note + "</td></tr>");



                                    });

                                    $('#txt').html($table);

        });
    });

$table.append(key)      

})(jQuery);

</script>

</body>
</html>

如何在本地存储中存储来自html-javascript的表构建并在刷新时将其保留？

0 个答案: