I am trying to add some notes on the image using jquery plugin. Now with my code, I can add notes on any image and save x,y coordinates and note using a table. But the problem is when we refresh the page all the data including table is lost. Can anyone help me with local storage code for saving table from my page and retaining it back after refresh.
Here's my complete code, please ignore some javascript plugins links in the code.
<!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>
