Web Storage

来源：互联网发布：鸣鸟不飞知乎编辑：程序博客网时间：2024/04/27 01:26

在HTML5中，新增了可以在本地存储数据的web storage功能。具体可以分为两种：
1、sessionStorage:将数据保存到session中。
2、localStorage:将数据保存到客户端本地的硬件设备中，即使浏览器被关闭了，该数据任然存在，下次打开浏览器还是可以使用。

首先看看sessionStorage，sessionStorage保存数据是以键值对的形式来保存数据的:
创建index.html文件，代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <script src="storage.js"></script></head><body>    <p id="msg"></p>    <input id="input" type="text">    <input type="button" value="读取数据" onclick="saveMsg('input')">    <input type="button" value="显示数据" onclick="showMsg('msg')"></body></html>

创建storage.js文件如下：

function showMsg(id){    var target = document.getElementById(id);    target.innerHTML = sessionStorage.getItem("message");}function saveMsg(id){    var target = document.getElementById(id);    var str = target.value;    sessionStorage.setItem("message",str);}

运行效果：
这里写图片描述
可以看到在session Storage中保存了一个键值对。

再来看看localStorage,它同样是以键值对方式存储数据，将上面的storage.js代码改成如下形式：

function showMsg(id){    var target = document.getElementById(id);    target.innerHTML = localStorage.getItem("message");}function saveMsg(id){    var target = document.getElementById(id);    var str = target.value;    localStorage.setItem("message",str);}

效果如下：
这里写图片描述
可以看到在浏览器的localStorage中存在刚保存的键值对，这时候关闭浏览器，该键值对还是会存在。

0 0