Не можете сохранить содержимое, редактируемое в местном хранилище? - PullRequest
Новая
       43

Не можете сохранить содержимое, редактируемое в местном хранилище?

0 голосов
/ 02 мая 2018

Я хочу сохранить редактируемые данные содержимого в локальном хранилище.

Прямо сейчас, если вы пытаетесь редактировать таблицу запасов, она меняется, а когда вы обновляете страницу, она возвращается к исходному значению.

Есть ли способ сделать это автоматически, не требуя кнопки для его сохранения? Просто выйдя из текстового поля, оно автоматически сохранится. 

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Inventory</title>


  <link href="https://fonts.googleapis.com/css?family=Anton|Titan+One" rel="stylesheet">


  <style type="text/css">
  	

  table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

#hewrap{
 text-align: center;
}


#he {
	font-family: 'Titan One', cursive;
font-family: 'Anton', sans-serif;
color: white;
background-color: black;
font-size: 32px;
}


.fi {
	border-radius:5px;
	height: 30px;
}

#btn {
	border-radius: 5px;
	height: 30px;
	background-color: blue;
	color:white;
}

#ftr {
	background-color: black;
}



  </style>



</head>




<body>


	<a class="c-link" href='' onclick='javascript:clearLocal();'>Clear storage</a>

	<div id="hewrap">
	<h1 id="he">Inventory</h1>
</div>

<table id="inventory">
  <thead>
    <tr>
       	<th>Description</th>
    	<th>Part-#</th>
    	<th>Required</th>
    	<th>Stock</th>
   		<th>Price</th>
    	<th>N/A</th>
    </tr>

    	<tr id="ftr">
  

	<td><input class="fi" type="text" id="one" placeholder="Description"></td>
	<td><input class="fi" type="text" id="two" placeholder="Part-#"></td>
	<td><input class="fi" type="text" id="three" placeholder="Required"></td>
	<td><input class="fi" type="text" id="four" placeholder="Stock"></td>
	<td><input class="fi" type="text" id="five" placeholder="Price"></td>
	<td><button id="btn" onclick="addRow()">ADD</button></td>


    	</tr>

  </thead>
  <tbody id="screen">
  </tbody>
</table>
</body>
  <script>

  	//scribble data



//save
    $( document ).ready(function(){
      $('#screen').html(localStorage.getItem("data"));
      
    });
    function addRow(){

      var str = '<tr class = "boxType"><td>'+$('#one').val()+'</td>\
  <td>'+$('#two').val()+'</td>\
  <td>'+$('#three').val()+'</td>\
  <td id="scribble" contenteditable="true" onkeyup="storeUserScribble(this.id);">'+$('#four').val()+'</td>\
  <td>'+$('#five').val()+'</td>\
</tr>'
      $('#screen').append(str);
      localStorage.setItem("data", $('#screen').html());
    } 

  </script>

  <script type="text/javascript">
        getUserScribble();
  </script>

</html>
...