网页本地存储
<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);
}
}
//清空所有的item
function 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);
}
}
//重置localstorage
function 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>
