本地存储

最新推荐文章于 2024-07-28 18:07:55 发布

uncle_Huang

最新推荐文章于 2024-07-28 18:07:55 发布

阅读量169

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： web存储

本文链接：https://blog.youkuaiyun.com/uncle_Huang/article/details/95938073

前端专栏收录该内容

23 篇文章

订阅专栏

Web Storage

sessionStorage临时保存
保存：
sessionStorage.setItme(‘key’,‘value’);
或
sessionStorage.key=‘value’;
读取：
变量=sessionStorage.getItem(‘key’);
或
变量= sessionStorage.key;

index.html


<html>
  <head lang="en">
    <meta charset="utf-8"/>
	<title>webStorage</title>
	<script type="text/javascript" src="index.js"></script>
  </head>
  <body>
  <h1>webStorage本地存储</h1>
  <p id="msg"></p>
  <input type="text" id="input"/>
  <input type="button" value="保存数据" onclick="saveStorage('input')"/>
  <input type="button" value="读取数据" onclick="loadStorage('msg')"/>
  </body>
</html>

index.js

function saveStorage(id){
	var target = document.getElementById(id);
	var str = target.value;
	sessionStorage.setItem("mess",str);
}

function loadStorage(id){
	var target = document.getElementById(id);
	var msg = sessionStorage.getltem("mess");
	target.innerHTML = msg;
}

localStorage永久保存
保存：
localStorage.setItem(‘key’,‘value’);
或
localStorage.key;
读取：
变量=localStorage.getItem(‘key’);
或
变量=localStorage.key;

index.js

function saveStorage(id){
	var target = document.getElementById(id);
	var str = target.value;
	localStorage.setItem("mess",str);
}

function loadStorage(id){
	var target = document.getElementById(id);
	var msg = localStorage.getItem("mess");
	target.innerHTML = msg;
}

小实例留言板

效果图：

需要使用的函数：

saveStorage
new Date().getTime()获取当前日期和时间戳
loadStorage
loadStorage.length数据条数
localStorage.key(index);
clearStorage
localStorage.clear();

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webStorage本地存储</title>
    <script type="text/javascript" src="index.js"></script>
</head>
<body>
<h1>webStorage本地存储</h1>
<textarea id="demo" rows="10" clos="60"></textarea>
<br/>

<input type="button" value="保存" onclick="saveStorage('demo')"/>
<input type="button" value="读取" onclick="loadStorage('msg')"/>
<input type="button" value="清除" onclick="clearStorage('msg')"/>
<hr/>
<p id="msg"></p>
</body>
</html>

index.js

function saveStorage(id){
    var data = document.getElementById(id);
    var  time = new Date().getTime().toString();

    localStorage.setItem(time,data);
    alert("数据已保存！");
    loadStorage('msg');
}



function loadStorage(id){
    var result = '<table border="1">';

    for(var i=0;i<localStorage.length;i++){
        var key = localStorage.key(i);
        var value = localStorage.getItem(key);
        var date = new Date();
        date.setTime(key);
        var datestr = date.toGMTString();
        result+='<tr><td>'+'这是第'+i+'条数据</td><td>'+value+'</td><td>'+datestr+'</td></tr>';
    }
    result+='</table>';
    var target = document.getElementById(id);
    target.innerHTML = result;

}

function clearStorage(id){
    localStorage.clear();
    alert("数据已被成功删除！");
    loadStorage('msg');
}

页面显示 [object HTMLTextAreaElement]
在这里插入图片描述
错误原因：
data取值错误，取的是id，而不是value,因此没显示value值。

var data = document.getElementById(id);

改为

var data = document.getElementById(id).value;;

改完后，运行，图如下：

在这里插入图片描述
如果把loadStorage()代码改成这样:

function loadStorage(id){
    var result = '<table border="1">';

    for(var i=1;i<=localStorage.length;i++){
        var key = localStorage.key(i);
        var value = localStorage.getItem(key);
        var date = new Date();
        date.setTime(key);
        var datestr = date.toGMTString();
        result+='<tr><td>'+'这是第'+i+'条数据</td><td>'+value+'</td><td>'+datestr+'</td></tr>';
    }
    result+='</table>';
    var target = document.getElementById(id);
    target.innerHTML = result;

}