Web Storage 前端存储

1、Web Storage

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

  • Web Storage 钟的Storage的接口有两种,第一种叫Session Storage,另一种叫Local Storage.
  • Session Storage:这种保存的数据是短暂的,在会话结束(浏览器关闭)数据就消失了。
    Web Storage 前端存储_第1张图片
  • Local Storage.:这种数据可以一直在本地保存。
    Web Storage 前端存储_第2张图片
  • 这里保存数据的格式是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存储、读取数据


<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="pragma" content="no-cache">
	<title>Documenttitle>
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>

页面
Web Storage 前端存储_第3张图片
点击保存数据
Web Storage 前端存储_第4张图片
点击读取数据
Web Storage 前端存储_第5张图片

4、保存结构化的数据(json数据)

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


<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="pragma" content="no-cache">
	<title>Documenttitle>
	<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>

Web Storage 前端存储_第6张图片

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() +" "+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>

Web Storage 前端存储_第7张图片

你可能感兴趣的:(Web前端开发)