html---Web Storage存储

在HTML5中，除了Canvas元素之外，另一个新增的非常重要的功能是可以在客户端本地保存数据的Web Storage功能，之前可以使用Cookies在客户端保存如用户名等简单用户信息，但通过长期使用，人们发现Cookies储存永久数据存在几个问题

大小：Cookies的大小被限制在4kb
带宽：Cookies是碎HTTP事物一起被发送的，因此会浪费一部分发送Cookies时使用的带宽
复杂性：要正确的操纵Cookies是很困难的

针对这些问题，HTML5中，重新提供了一种在客户端本地保存数据的功能，就是Web Storage功能，顾名思义，Web Storage功能就是在Web上存储数据的功能，这里的存储是针对客户端本地而言的。具体分两种

sessionStorage：将数据保存在session对象中。Session是值用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所胡斐的时间。Session对象可以用来保存在这段时间内所要求保存的任何数据
localStorage：将数据保存在客户端本地的硬件设备中，即使浏览器被关闭了，改数据仍然存在，下一次打开浏览器访问网站时仍然可以继续使用。若要删除，可直切清除cookies即可；在程序中，可执行localStorage.clear（）来清除

例子

html网页文件

<body>
　　<p id="msg"></p>
　　<input type="text" id="input" />
　　<input type="button" value="保存数据" onclick="saveStorage('input')"/>
　　<input type="button" value="读取数据" onclick="loadStorage('msg')"/>
</body>

js文件

function saveStorage(id) {
    var target = document.getElementById(id);
    var str = target.value;
    // 保存数据的方法
    // sessionStorage.setItem("message",str);
    localStorage.setItem("message",str);
}

function loadStorage(id) {
    var target = document.getElementById(id);
    // 读取数据
    // var msg = sessionStorage.getItem("message");
    var msg = localStorage.getItem("message");
    target.innerHTML = msg;
}

来源：oschina

链接：https://my.oschina.net/u/4306898/blog/4199644

标签

html5