网页本地存储
<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>
<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);
}
}
//重置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=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>