Web Storage 前端存储

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>

Web Storage 前端存储相关推荐

H5中使用Web Storage来存储结构化数据
在上一篇对Web Storage的介绍中,可以看到,使用Storage保存key-value对时,key.value只能是字符串,这对于简单的数据来说已经够了,但是如果需要保存更复杂的数据,比如保存类 ...
使用 jQuery Mobile 与 HTML5 开发 Web App (十六) —— HTML5 Web Storage
绝大多数的软件都需要使用某种具有持久性的方式来存储数据,Web Apps 也不例外,涉及到完整后台的 Web Apps ,可以直接在后台使用 mysql 等数据库来存储数据,但过多的 sql 查询会影 ...
H5本地储存Web Storage
一.本地存储由来的背景由于HTML4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了C ...
HTML5本地存储之Web Storage篇
2019独角兽企业重金招聘Python工程师标准>>> Web Storage是HTML5引入的一个非常重要的功能,在前端开发中经常用到,可以在客户端本地存储数据,类似HTML4的c ...
HTML5 高级系列：web Storage 学前端开发要先看这个
HTML5 高级系列:web Storage 学前端开发要先看这个前言 HTML5 的 web Storage 存储方式有两种:localStorage 和 sessionStorage. 这两种方 ...
页面相关的数据存储(缓存及Web Storage)
页面可用的缓存包括:Http Cache, Local Storage, Session Storage以及Application Cache. 它们都可以用来减少请求数量,以提高页面的性能及减少流量 ...
html5 本地存储Web Storage
在过去本地存储数据基本都是使用cookies保存一些简单的数据,使用cookies存储永久数据存在以下几个问题: 1.cookies的大小被限制在4KB: 2.cookies是随HTTP事务一起发送的 ...
（五）HTML5本地存储——Web Storage
Web应用的发展,使得客户端存储使用得也越来越多,而实现客户端存储的方式则是多种多样.最简单而且兼容性最佳的方案是Cookie,但是作为真正的客户端存储,Cookie则存在很多致命伤.此外,在IE6及 ...
HTML5 本地存储（Web Storage）
HTML5 提供了两种在客户端存储数据的新方法: localStorage - 本地永久存储,下次打开浏览器数据依然存在 sessionStorage - 只存在于一个会话的数据存储,关闭浏览器数据会 ...