当前位置：首页 > news >正文

网页本地存储

news 2025/8/3 23:13:50

网页本地存储

<html>
<script>//添加数据function add(){var text;text=document.getElementById('text').value;index=localStorage.length+1;localStorage.setItem(index,text);}//显示localStorage所有内容function showall(){storage=localStorage;var length = storage.length//   在控制台打印数据for(var i=0;i<length;i++){// 索引var index = storage.key(i);// 值var value = storage.getItem(index);// 控制台打印值console.log(value);//   使用表格形式显示//  获取插入位置dom元素var element = document.getElementById("showall");// 创建行元素const row = document.createElement('tr');//   创建列元素const cell = document.createElement('td');const cel2 = document.createElement('td');//   给列元素赋值cell.textContent ="1";cel2.textContent ='value';row.appendChild(cell)row.appendChild(cel2)element.appendChild(row);}//显示到html。var showall = document.getElementById("showall")showall.innerHTML = JSON.stringify(storage);for(var i =0;i<localStorage.length+1;i++){//   使用表格形式显示//  获取插入位置dom元素var element = document.getElementById("table");// 创建行元素const row = document.createElement('tr');//   创建列元素const cell = document.createElement('td');const cel2 = document.createElement('td');//   给列元素赋值cell.textContent =i;cel2.textContent =localStorage.getItem(i);row.appendChild(cell)row.appendChild(cel2)element.appendChild(row);}}//清空所有的itemfunction clearall(){localStorage.clear();}</script>
<body>需求分区使用html+js 实现数据的存储价值下一步计划，期望，目标是格式化输出的数据格式，以表格的形式显示数据。<p>输入需要添加的数据</p><!-- 输入框 --><input id="text" type="text"><!-- 增 --><button type="" onclick=add()>点击添加数据</button><!-- 查询 --><button onclick=showall()>显示所有记录</button><!-- 全部删除 --><button onclick=clearall()>清空所有记录</button><p id="showall"></p>
<p id="jsonDataTable" class="jsonDataTable"></p>
<table id="table"><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>1</td><td>2</td><td>3</td></tr>
</table><table id="jsonDataTable"><thead><tr><th>Name</th><th>Age</th><th>City</th></tr></thead><tbody></tbody></table></body>
</html><style>table {border-collapse: collapse;width: 50%;margin: auto;}th, td {border: 1px solid black;padding: 8px;text-align: left;}th {background-color: #f2f2f2;}
</style>

在这里插入图片描述

更新
在这里插入图片描述

<html><script>//添加数据函数，可添加一个字段function adddata(){var text;text=document.getElementById('text').value;index=localStorage.length+1;localStorage.setItem(index,text);}//显示localStorage所有内容function showall(){var element = document.getElementById("showall");for(var i=0;i<localStorage.length;i++){var value = localStorage.getItem(localStorage.key(i));//  获取插入位置dom元素var id = document.createElement('p');id.textContent =i+" "+value;element.appendChild(id);}}//重置localstoragefunction clearall(){localStorage.clear();}</script><body><p>输入需要添加的数据</p><!-- 输入框 --><input id="text" type="text"><!-- 增 --><button type="" onclick=adddata()>点击添加数据</button><!-- 查询 --><button onclick=showall()>显示所有记录</button><!-- 重置 --><button onclick=clearall()>清空所有记录</button><button onclick=modify()>修改</button><p id="showall"></p></body></html>

在这里插入图片描述

<html><script>//添加数据函数，可添加一个字段function adddata(){var text;text=document.getElementById('text').value;index=localStorage.length+1;localStorage.setItem(index,text);}
// 删除
function dele(){var idd=document.getElementById('idd').value;localStorage.removeItem(idd);}
// 修改
function modify(){var id=document.getElementById('id').value;var value=document.getElementById('value').value;//  localStorage.setItem(id,value);localStorage.removeItem(id);localStorage.setItem(id,value);
}//显示localStorage所有内容// 表格显示function show_table(){var element = document.getElementById("showall");var table = document.getElementById("table");for(var i=0;i<localStorage.length;i++){//  获取插入位置dom元素var row = document.createElement('tr');var id = document.createElement('td');var value = document.createElement('td');row.appendChild(id);row.appendChild(value);//  index 是string类型，将数字转换为字符id.textContent = i ;value.textContent = localStorage.getItem(i.toString());// value.textContent='va';table.appendChild(row);}}function showall(){var element = document.getElementById("showall");for(var i=0;i<localStorage.length;i++){var value = localStorage.getItem(localStorage.key(i));//  获取插入位置dom元素var id = document.createElement('p');id.textContent =i+" "+value;element.appendChild(id);}}//重置localstoragefunction clearall(){localStorage.clear();}</script><body><p>输入需要添加的数据</p><!-- 输入框 --><input id="text" type="text"><!-- 增 --><button type="" onclick=adddata()>点击添加数据</button><!-- 查询 --><button onclick=showall()>列表显示所有记录</button><!-- 表格显示 --><button onclick=show_table()>表格显示记录</button><!-- 重置 --><button onclick=clearall()>清空所有记录</button>
<!-- 修改 --><div style="display: block;"><input id="id" type="text"><input id="value" type="text"><button onclick=modify()>输入索引和内容修改</button></div><!-- 删除 -->
<div style="display: block;"><input id="idd" type="text"><button onclick=dele()>输入索引删除</button>
</div><p id="showall"></p><table id="table" ><tr ><td>编号</td><td >内容</td></tr></table></body></html><style>table {border-collapse: collapse;width: 50%;margin: auto;}th, td {border: 1px solid black;padding: 8px;text-align: left;}th {background-color: #f2f2f2;}</style>

查看全文

http://www.lryc.cn/news/440615.html