sessionStorage、localStorage用法总结

布满荆棘的人生 2022-05-27 10:50 218阅读 0赞

1.  作用：首先说明一下：sessionStorage和localStorage一样都是用来存储客户端临时信息的对象。
2.  存储内容的数据类型：两者皆储存字符串类型的数据。
3.  生命周期：
    
    1.  sessionStorage：生命周期是当前窗口或标签页，一旦窗口或标签页被关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
    2.  localStorage：生命周期是永久，这意味着除非用户显式操作在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。
4.  信息是否可共享： 不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。
5.  html5 web storage的浏览器支持情况   
          浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)。
6.  localStorage和sessionStorage操作（下面例子以sessionStorate为例）
    
    1.  setItem存储value   
        sessionStorage.setItem(“key”,”value”);//以“key”为名称存储一个值“value”   
        eg: sessionStorage.setItem(“realName”,”韩梅梅”);
    2.  getItem获取value   
        sessionStorage.getItem(“key”);//获取名称为“key”的值
    3.  removeItem(“key”) 删除key   
        sessionStorage.removeItem(“realName”);
    4.  clear() 清除所有内容   
        sessionStorage.clear();//清空sessionStorage中所有信息。   
        localStorage也拥有以上四个方法
7.  *\* 点操作和\[\]\**   
    web Storage不但可以用自身的setItem,getItem等方便存取，也可以像普通对象一样用点(.)操作符，及\[\]的方式进行数据存储，像如下的代码：

var storage = window.localStorage; 
        storage.key1 = "hello"; 
        storage['key2']="world";
        console.log(storage.key1);   // 结果：hello 
        console.log(storage["key2"]);  // 结果world

8.存与取

存
      var tempInfo = { realName:$("#realName").val(),idNo:$("#idNo").val()};
      var str1 = JSON.stringify(tempInfo); 
           sessionStorage.tempInfo = str1; 
       取
      var str=sessionStorage.tempInfo;
        if(str !='' && str != undefined){
            var obj = JSON.parse(str);
            $('#realName').val(obj.realName);
        }