您的位置：首页 > Web前端 > HTML

HTML 5 中WebStorage实现数据本地存储

2014-10-27 14:17 375 查看

webstorage 分sessionStorage和localstorage，sessionStorage是临时保存，localStorage是永久保存。 sessionStorage如果浏览器关闭了，数据就没有了，而localStorage则不会。

sessionStorage：

保存数据     sessionStorage.setItem(key, value);

读取数据   sessionStorage.getItem(key);

localStorage：

保存数据   localStorage.setItem(key, value);

读取数据   localStorage.getItem(key);

示例

<span style="font-family:Microsoft YaHei;font-size:18px;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script language="JavaScript">

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

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

</script>
</head>
<body>
<p id="msg"></p>
<input type="text" id="input"/>
<button onclick="saveStorage('input')">保存数据</button>
<button onclick="loadStorage('msg')">获取数据</button>
</body>
</html></span>

如果使用得好，也可将webStorage作为一个简易的数据库，键的值采用JSON字符串就可以。当然这只是可以实现，运用的时候，webStorage的空间还是很珍贵的，一般大多数浏览器都只提供5M左右的空间。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航