个人中心
gpt4 book ai didi

javascript - 我只使用 JavaScript 创建了一个包含一些记录的表，我想将包含对象的数组设置为本地存储

转载 作者：太空宇宙 更新时间：2023-11-03 22:22:29 25 4
gpt4 key购买 nike 

var items2 = [
  {name:'HP 1Laptop', id:'Item1251', price:1001}, 
  {name:'HP 2Laptop', id:'Item1252', price:1002}, 
  {name:'HP 3Laptop', id:'Item1253', price:1003}, 
  {name:'HP 4Laptop', id:'Item1254', price:1004}, 
  {name:'HP 5Laptop', id:'Item1250', price:1005}, 
  {name:'HP 6Laptop', id:'Item1256', price:1006}, 
  {name:'HP 7Laptop', id:'Item1257', price:1007}, 
  {name:'HP 8Laptop', id:'Item1258', price:1008}, 
 ]; 
var items = [];
function saveData(){
	localStorage.setItem('localData', JSON.stringify(items2))
}
function loadData(){
var arr1 = localStorage.getItem('localData');
items = JSON.parse(arr1);
}
saveData();
loadData();
 
var globalIndex;
var updateBtn = document.getElementById('updateRow');
var addBtn = document.getElementById('addBtn');
var numberFieldValue = document.getElementById('numberOfRecords');

var recordsCounting = document.getElementById('counter');
var updatedRow = document.getElementById('countries');
 
function recordsLoading(){
var data='';
if(items.length >= 0){
for(var i = 0; i< items.length; i++){
data+= '<tr>';
data+= '<td>'+ items[i].name +'</td>';
data+= '<td>'+ items[i].id +'</td>';
data+= '<td>'+ items[i].price +'</td>';
data+= '<td><button class="btn btn-info" onclick="editingRecord('+i+')">Edit</button> <button class="btn btn-danger" onclick="delRecord('+i+')">Delete</button></td></tr>';
 
}
document.getElementById('countries').innerHTML = data;
}
  recordsCounting.innerText =  items.length ;
}
 
recordsLoading();
/*From Here CRUD Operations are started*/

/*get the userdata from the current input fields*/
var itemName = document.getElementById('addNewitemName');
var itemId = document.getElementById('addNewitemID');
var itemprice = document.getElementById('addNewitemPrice');

/*This is for Adding records to the table*/
 function addingRecord(){
   if(itemName.value!=='' && itemId.value!=='' && itemprice.value !== ''){
    items.push({name:itemName.value, id:itemId.value,price:itemprice.value});
	items2.push({name:itemName.value, id:itemId.value,price:itemprice.value});
    recordsLoading();
    itemName.value = '';
    itemId.value = '';
    itemprice.value = '';
   }

 itemName.focus();
 }
 
 /*This is For Deleting a record from the table*/
function delRecord(indexValue){
items.splice(indexValue, 1);
 recordsLoading();
 }
/*This is for to edit existing record values*/ 
 function editingRecord(indexValue){
  itemName.value = items[indexValue].name;
  itemId.value = items[indexValue].id;
  itemprice.value = items[indexValue].price;
  updateBtn.style.display = 'inline-block';
  addBtn.style.display = 'none'
  globalIndex = indexValue;
 }
 
 /*This is for update edited Value in the Table*/
 function update(){
items[globalIndex].name = itemName.value;
items[globalIndex].id = itemId.value;
items[globalIndex].price = itemprice.value;
itemName.value = "";
itemId.value = "";
itemprice.value= "";
recordsLoading();
 } 
<!-- I need to retrieve my data from local Storage, I know local
     storage concept but I don't know how it works with real time
     data -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Countries CRUD</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
    #updateRow{
      display: none;
    }
	.scrollView{
	max-height:350px;
	overflow-Y:auto;
	}
  </style>
</head>
<body>
<div class="container">
<hr/>
<form action="#"> 
<div class="form-group">
 
  
  
  <table class="table table-bordered table-striped">
   <!-- <tr>  -->
  <!-- <td colspan="3"><input type="number" id="numberOfRecords" placeholder="Enter Number Of Items To Disaplay in Below Table" class="form-control"></td>  -->
  <!-- <td><button class="btn btn-info btn-block" onclick="renderRecords();">Create</button></td>  -->
   <!-- </tr> -->
  <tr>
  <td><input type="text" id="addNewitemName" placeholder="Enter Item Name" class="form-control"></td>
  <td><input type="text" id="addNewitemID" placeholder="Enter Item ID" class="form-control"></td>
  <td><input type="number" id="addNewitemPrice" placeholder="Enter Item Price" class="form-control"></td>
  <td width="150"><button onclick="addingRecord()" id="addBtn" class="btn btn-primary btn-block">Add</button><button class="btn btn-info" id="updateRow" onclick="update()"> Update </button></td>
  </tr>
  </table>
  </div>
</form>

<div style="padding:5px 0px;">

<button type="button" class="btn btn-success">
  Available Records : <span class="badge badge-light" id="counter"></span>
</button>
</div>
<div class="scrollView">
<table class="table table-bordered">
  <tr>
    <th onclick="sorting('name');">Name</th>
	<th onclick="sorting('id')">Item ID</th>
	<th onclick="sorting('price')" >Item Price</th>
	<th width="150"></th>
  </tr>
    <tbody id="countries">
    </tbody>
</table>
</div>
<button class="btn btn-warning" onclick="saveData();">Save Data</button>
<button class="btn btn-warning" onclick="loadData();">Retrive Data</button>
</div>

</body>
</html>

最佳答案

要将对象数组保存到 localStorage，首先将该对象数组字符串化，然后将其保存到 localStorage。当从 localStorage 中检索到它时，解析它以获取初始数组。要将任何内容保存到 localStorage，请使用 localStorage.setItem('name',value);默认情况下，保存在 localStorage 中的元素变为 String 类型。要从 localStorage 检索保存的元素，请使用 localStorage.getItem('name');

 var items = [
  {name:'HP 1Laptop', id:'Item1251', price:1001}, 
  {name:'HP 2Laptop', id:'Item1252', price:1002}, 
  {name:'HP 3Laptop', id:'Item1253', price:1003}, 
  {name:'HP 4Laptop', id:'Item1254', price:1004}, 
  {name:'HP 5Laptop', id:'Item1250', price:1005}, 
  {name:'HP 6Laptop', id:'Item1256', price:1006}, 
  {name:'HP 7Laptop', id:'Item1257', price:1007}, 
  {name:'HP 8Laptop', id:'Item1258', price:1008}, 
 ]; 

 localStorage.setItem('array' , JSON.stringify(items));
 console.log("saved array is\n", JSON.parse(localStorage.getItem('array')));

关于javascript - 我只使用 JavaScript 创建了一个包含一些记录的表，我想将包含对象的数组设置为本地存储，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52965262/

25 4 0
文章推荐： html - 我如何将这两个按钮以不同的形式并排放置
文章推荐： css - 循环内的SASS插值将增量转换为字符串
文章推荐： css - :focus not working for the input control scss
文章推荐： c# - 将委托(delegate)用法从 C# 转换为 VB
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com