Webstorage特性

Webstorage

webstorage是HTML5新出的标签，是本地存储的解决方案之一，有sessionStorage与localStorage两种。
在HTML5的WebStorage概念引入之前，IE User Data、Flash Cookie、Google Gears等多多少少都存在一定的问题，兼容性也是让诸位开发者十分头疼的存在，而新出的HTML5则是针对基础做出了改进，除了低版本的浏览器，几乎不存在兼容性的问题。

那么就有人要说了，都是存储，那有了cookie，为什么还要有新的webStorage呢？那么首先就让我们来了解一下，这三者之间，到底有什么区别。

区别

webStorage（sessionStorage、localStorage）

• 首先他的范围，sessionStorage只针对当前会话页面，一旦退出，浏览器释放缓存，再次载入需要重新登录。localStorage数据存储在本地，只要不手动删除，他可以一直存在下去。
• 其次，他的大小比cookie大，cookie只有4K，对于数据来说有些不足，但是webStorage不同，他可以传送数据5M甚至更大。
• webStorage支持事件通知机制，可以将数据更新的通知发生给监听者，不需要占传输带宽。
• 使用API接口，调用十分方便。

cookie

• cookie数据传递，需要通过同源的http请求携带，在浏览器和服务器间来回传递，即便不需要，这无疑是浪费资源的。
• cookie数据有路径（path）的概念，只能属于某个路径下。
• 存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如回话标识。
• 不同于webStorage，cookie设置过期时间，在过期时间之前一直有效，即使窗口和浏览器关闭（这点确实很方便）。
• 在同源窗口中共享数据。

如何实现调用？

代码如下：

<script>
    //创建一个新对象
    var data = new Object; 
    data.id = document.getElementById('id').value;
    data.name = document.getElementById('name').value;
    data.sex = document.getElementById('sex').value;
    data.age = document.getElementById('age').value;

    //json数据转换成字符串 
    var str = JSON.stringify(data);  
    localStorage.setItem(data.name,str);  
    alert("数据已保存。");  
</script>

webStorage是十分方便的API接口，HTML5定义的接口，也解决了兼容的问题，推荐大家都试一试。