HTML5缓存(localStorage与sessionStorage)

一、简介

比cookie更好的本地存储方式

在html5之前，本地存储使用cookie, 但是存储大小只有4k，并且解析也很复杂，不利于开发。于是html5给出了解决方案——两个在客户端存储数据的对象：

• window.localStorage: 可以长期存储数据(存储在硬盘中)，没有截止日期，直到手动去除。可以多窗口共享，但是不能跨浏览器。
• window.sessionStorage：用于临时保存数据，在关闭窗口或标签页时将会删除这些数据。同一个窗口下数据可共享(在当前页面下可以获取到数据，换一个页面就获取不到了)。

html5缓存的特点：

1. 设置、读取方便
2. 容量较大，sessionStorage约5M，localStorage约20M
3. 智能存储字符串，可以将对象JSON.stringify()编码后存储

二、浏览器支持

使用如下代码测试

    if(typeof(Storage)!=="undefined")
    {
        // 是的! 支持 localStorage  sessionStorage 对象!
        console.log("支持");
    } else {
        // 抱歉! 不支持 web 存储。
        console.log("不支持html5缓存");
    }

三、常用API

两个对象可使用的API相同(以sessionStorage为例)

1.设置缓存

    sessionStorage.setItem("username", "maodou");

2.读取缓存

    console.log(sessionStorage.getItem("username"));

3.删除单个缓存

    sessionStorage.removeItem("username");

4.根据索引获取存储的key值

    console.log(sessionStorage.key(0));
    console.log(sessionStorage.key(1));

5.删除所有数据

    sessionStorage.clear();