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

Html本地数据存储Web Storage

2015-08-17 21:04 549 查看

Cookies可以将web数据保存在本地，但有一些弊端，如Cookies的大小被限制在4KB，Cookies是随着Http事务一起发送的，这样就浪费了一定的带宽，再者操作Cookies是相对麻烦的，Web storage是客户端将Web上的数据存储在本地，有两种：sessionStorage和localStorage。

sessionStorage：将数据保存在session中，session指的是用户在浏览某个网站时，从进入这个网站到关闭浏览器经过的时间，而sessionStorage保存的数据的生命周期就是这段时间，在这段时间之外sessionStorage保存的数据就会失效；

localStorage：将数据保存在客户端本地的硬件设备上，即使浏览器被关闭了数据依然存在，下次打开网站之后，之前保存的数据依然可以使用，不会自动废弃。

代码截图：

代码示例：

index.html

<head>

<script src="app.js"></script>

</head>

<body>

<p id="id_p"></p>

<input id="id_input" type="text" />

<input type="button" value="保存数据" onclick="saveData('id_input')" />

<input type="button" value="显示数据" onclick="showData('id_p')" />

</body>

app.js

function saveData(id){

var target = document.getElementById(id);

var str = target.value;

sessionStorage.setItem("message", str);

alert("存储成功");

}

function showData(id){

var target = document.getElementById(id);

var str = sessionStorage.getItem("message");

target.innerHTML = str;

//target.innerText = str;

alert(str);

}

效果图：

［注意］当我们关闭浏览器，重新打开浏览器之后，会发现无法再获取该数据，若想将数据长久保存在客户端本地，需要将上面的sessionStorage换为localStorage.

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

标签：

相关文章推荐

新的分享

章节导航