Html 5网络存储之 SessionStorage

• 本文承接《Html 5网络存储之 LocalStorage》

SessionStorage 简述

• SessionStorage 是HTML5新增的一个会话存储对象，用于临时保存同一窗口(标签页)的数据，在关闭窗口或标签页之后将会删除这些数据
• 在JavaScript语言中可通过 window.sessionStorage 或 sessionStorage 调用此对象。完全类似localStorage对象的获取
  
• seesionStorage 与 localStorage 一样采用key-value方式存储。key值相同时，新增的覆盖原有的。value值必须为字符串类型(传入非字符串，也会在存储时转换为字符串，如true值会转换为"true")。
  
• sessionStorage 与 localStorage 一样，大多数浏览器把存储大小上限限制在5MB以内
• 不同浏览器无法共享 localStorage或sessionStorage中的数据。相同浏览器不同页面间可以共享 localStorage，不同页面或标签页间无法共享sessionStorage的信息。
  

SessionStorage 操作

• sessionStorage 和  localStorage 使用完全相同的API，所以本文操作部分只做简要描述，详情请参考《Html 5网络存储之 LocalStorage》

存 值

• sessionStorage.setItem("key","value"); //以“key”为名称存储一个值“value”,key相同时会覆盖value
• sessionStorage["key"] = value; //以“key”为名称存储一个值“value”,key相同时会覆盖value
• sessionStorage.key = value; //以“key”为名称存储一个值“value”,key相同时会覆盖value

取 值

• value = sessionStorage.getItem("key"); //获取“key”的value，key不存在时，返回undefined或者null
• value = sessionStorage["key"]; //获取“key”的value，key不存在时，返回undefined或者null
• value = sessionStorage.key; //获取“key”的value，key不存在时，返回undefined或者null

枚 举

• 使用length属性加getItem方法

for(var i=0;i<sessionStorage.length;i++){
    var name = sessionStorage.key(i)​;
    var value = sessionStorage.getItem(name);
}

删 除

• sessionStorage.removeItem("key");//删除名称为“key”的信息。
• sessionStorage.clear();​//清空sessionStorage中所有信息

<script type="text/javascript">
    /**
     * 判断浏览器是否支持localStorage
     * 通常都是可以支持的
     */
    if (window.sessionStorage) {
        console.log("当前浏览器支持sessionStorage...");
        var sessionStorageObj = window.sessionStorage;
        sessionStorageObj.setItem("name", "张三");
        sessionStorageObj.setItem("age", 20);

        let name = sessionStorageObj.getItem("name");
        let age = sessionStorageObj.getItem("age");
        console.log("name：" + name + "、age:" + age);

        sessionStorageObj.removeItem("age");
        age = sessionStorageObj.getItem("age");
        console.log("name：" + name + "、age:" + age);

        sessionStorageObj.clear();
        name = sessionStorageObj.getItem("name");
        age = sessionStorageObj.getItem("age");
        console.log("name：" + name + "、age:" + age);

    } else {
        console.log("当前浏览器不支持sessionStorage...");
    }
</script>