Web Storage 前端存储

最新推荐文章于 2024-04-22 00:16:05 发布

借汝之光，得以光明

最新推荐文章于 2024-04-22 00:16:05 发布

阅读量2.7k

点赞数

分类专栏： Web前端开发文章标签： WebStroage sessionStorage localStorage 前端数据库 storage

本文链接：https://blog.csdn.net/weixin_44588495/article/details/95328003

版权

Web前端开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1、Web Storage

许多小伙伴在学习前端的时候都有一个想法，自己只能写一些静态的数据，如果想动态加载数据的话，就要学习数据库，例如mysql、Sql Serve、oracle等，光学数据库还不行，还必须掌握一门后端语言，去搭服务，进行前后端的交互。这样学习的时间非常漫长，Web Storage可以存储数据，可以动态调用。利用这个并且不需要服务，直接就可以在前端显示。

Web Storage 钟的Storage的接口有两种，第一种叫Session Storage，另一种叫Local Storage.
Session Storage：这种保存的数据是短暂的，在会话结束（浏览器关闭）数据就消失了。
Local Storage.：这种数据可以一直在本地保存。
这里保存数据的格式是key-value的形式。

2、Web Storage的属性

length：返回保存了多少个key-value键值对。
key(index)：返回storage中第index的键值对的key。
getItem(key)：返回指定key的value。
set(key,value)：存入键值对。
removeItem(key)：删除指定key对应的价值对
clear()：清除所有

3、使用Storage存储、读取数据

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="pragma" content="no-cache">
	<title>Document</title>
</head>
<body>
	<input type="text" id="input"><br>
	使用Local Storage保存数据：<input type="checkbox" id="local">
	<div id="show"></div>
	<input type="button" value="保存数据" onclick="saveStorage('input');">
	<input type="button" value="读取数据" onclick="loadStorage('show');">
	<script>
		var saveStorage = function(id){
			var checked = document.getElementById('local').checked;
			var storage = checked?localStorage:sessionStorage;
			var target = document.getElementById(id);
			storage["message"] = target.value
		}
		var loadStorage = function(id){
			var checked = document.getElementById('local').checked;
			var storage = checked?localStorage:sessionStorage;
			var target = document.getElementById(id);
			target.innerHTML = storage["message"];
		}
	</script>
</body>
</html>

页面
在这里插入图片描述
点击保存数据

点击读取数据

4、保存结构化的数据（json数据）

在前后端交互的时候，多数使用的都是json数据。也就是说我们保存的时候是保存的json字符串，读取的时候是读取的json对象。这里就用到了两个函数JSON.parse()将字符串转换成对象，JSON.stringify()将对象转换成字符串。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="pragma" content="no-cache">
	<title>Document</title>
	<script>
	</script>
</head>
<body>
	<form action="">
		<input type="text" id="username">
		<input type="text" id="userage">
		<input type="text" id="usersex">
		<input type="submit" onclick="save()">
	</form>
	<script>
		function save(){
			var user = {
				name:document.getElementById('username').value,
				age:document.getElementById('userage').value,
				sex:document.getElementById('usersex').value
			}
			var str = JSON.stringify(user);
			var storage = localStorage;
			storage['user'] = str;
			console.log(str);
		}
		function read(){
			var str = localStorage['user'];
			var user = JSON.parse(str);
			console.log(user +"\n" + typeof user)
		}
	</script>
</body>
</html>

在这里插入图片描述

5、记事本例子

<body>
<textarea name="" id="msg" cols="50" rows="8">

</textarea><br>
<input type="button" value="添加事件" onclick="addMsg();">
<input type="button" value="清除事件" onclick="clearMsg();">
<hr>
<table style="width: 600px;text-align: center;">
    <tr>
        <th>事件</th>
        <th>添加时间</th>
    </tr>
    <tbody id="show"></tbody>
</table>
<script>
    var loadMsg = function(){
        var tb = document.getElementById("show");
        tb.innerHTML = "";
        for(var i = 0;i < localStorage.length;i++){
            var key = localStorage.key(i);
            var date = new Date();
            var dateStr = date.toLocaleDateString() +"&nbsp;"+date.toLocaleTimeString();
            var value = localStorage[key];
            var row = tb.insertRow(i);
            row.insertCell(0).innerHTML = value;
            row.insertCell(1).innerHTML = dateStr;
        }
    }

    var addMsg = function(){
        var msgElement = document.getElementById("msg");
        var time = new Date().getTime();
        localStorage[time] = msgElement.value;
        msgElement.value = "";
        alert("数据已经保存");
        loadMsg();
    }

    var clearMsg = function(){
        localStorage.clear();
        alert("全部事件信息已经删除");
        loadMsg();
    }
    window.onload = loadMsg();
</script>
</body>

在这里插入图片描述

借汝之光，得以光明

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Web Storage 前端存储

1、Web Storage许多小伙伴在学习前端的时候都有一个想法，自己只能写一些静态的数据，如果想动态加载数据的话，就要学习数据库，例如mysql、Sql Serve、oracle等，光学数据库还不行，还必须掌握一门后端语言，去搭服务，进行前后端的交互。这样学习的时间非常漫长，所以在HTML5更新后，传来了一个好消息，咱们前端也要有自己的数据库啦。就是Web Storage。利用这个并且不需要服...
复制链接

扫一扫