JavaScript之Web Storage

HTML5引入的一个非常重要的功能，可以在客户端本地存储数据，功能比cookie强大，存储数据量也远大于cookie的4KB，官方建议为每个网站5MB，部分浏览器可支持到10MB甚至更多。

包括2个不同类型
sessionStorage：浏览器关闭后数据即失效
localStorage：数据永久有效

写
localStorage.变量名=值;
读
var value= localStorage.变量名;
以上用法要求变量名必须符合JS命名规范
sessionStorage用法与localStorage相同

写：
sessionStorage.name=“mike”;
sessionStorage.pass=“123”;
localStorage.name=“jerry”;
localStorage.pass=“456”;

读：
var name_s=sessionStorage.name;
var pass_s=sessionStorage.pass;
var name_l=localStorage.name;
var pass_l=localStorage.pass;
其中name、pass都是自定义的名称，只要符合JavaScript命名规范即可，且无需编解码

length：存储的键值对数量
setItem(key,value)：写数据
getItem(key)：根据key读数据
removeItem(key)：根据key删除数据
clear()：删除所有数据
key(index)：获取index位置的key

<script type="text/javascript">
    function doWrite() {
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;

        //存储到localStorage中
        localStorage.username = username;
        localStorage.password = password;

        //存储到sessionStorage中
        sessionStorage.sex = "男";
        sessionStorage.hobby = "game;movie";

        console.log("写入WebStorage成功！");
    }

    function doReadAll() {
        console.log(localStorage);
        console.log(sessionStorage); //注：sessionStorage只能在当前页面中访问，打开新标签中无法访问
    }

    function doReadLocalStorage(key) {
        // console.log(localStorage.key); //由于没有属性为"key"的，所以获取不到，此处key是变量，不能使用此方式
        console.log(localStorage.getItem(key));
    }

    function doReadSessionStorage(key) {
        // console.log(sessionStorage.key); //不能使用此方式
        console.log(sessionStorage.getItem(key));
    }
</script>