DOM存储

概述

DOM存储(Storage)API是通过sessionStorage对象和localStorage对象来实现的。通过这些对象，WEB应用程序能够把信息存储到客户端，并再以后需要的时候进行获取。

其中：

sessionStorage
会话存储，其中的数据在页面会话结束时会被自动清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
localStorage
本地存储，其中的数据没有过期时间，在页面会话结束时不会被自动清除。

DOM存储与cookie的相同点：

本地存储和cookie一样提供了把数据保存到本地的能力，页面刷新或者关掉浏览器后，数据依然存在。
本地存储cookie一样只能存字符串数据。

DOM存储与cookie的不同点：

存储容量大。虽然不同浏览器的标准可能不一样，主流的一般都在5~10M，远超cookie的4k。
数据不会自动发送到服务器，与cookie相比，节省带宽，加快响应速度

代码示例

浏览器支持检测

通过以下代码可以事先检测浏览器是否支持本API。

  if(window.Storage) {
      //支持此API
  } else {
      //不支持此API
  }

存取数据

使用本地DOM存储

  var loSt = window.localStorage;
  loSt['username'] = 'hudao';
  loSt.setItem('jobName', 'wrting');
  console.log(loSt.length); //2
  console.log(loSt.username + ' job is ' + loSt.jobName); //hudao job is wrting
  loSt['jobName'] = 'singer';
  console.log(loSt.username + ' job is ' +loSt.jobName); //hudao job is singer
  delete loSt['jobName'];

使用会话DOM存储

  sessionStorage.setItem('company', 'Hudao');

上面代码表示访问当前域名的会话DOM存储对象，并使用setItem()访问往里面添加一个数据条目。

  //获得填充公司名称的文本输入框
  var company = document.getElementByid('company');
  
  
  //检测是否存在company键值
  if(sessionStorage.getItem('company')) {
    //将文本框中的值设置成sessionStorage中的company键值
    company.value = sessionStorage.getItem('company');
  }
  
  //添加监听文本输入框的change事件
  company.addEventListener("change", function(){
    //将文本框的值保存到sessionStorage中的company键值
    sessionStorage.setItem("company", company.value);
  });

捕获存储异常

不同的浏览器，分配给本地存储的空间是不一样的,该存储的空间是整个子域共享的。

如果当本地存储满了，再进行写数据，将会触发error，因此有时需要捕捉调用setItem()时的错误。

   try{
      localStorage.setItem('name', 'hudao');
   }catch(e){
     console.log('It's cant't write!');
   }

清空存储

调用clear()方法将会清空整个域的数据，包括和当前页面共享一个存储空间的其他页面。

localStorage.clear();
sessionStorage.clear();

参考

相关页面

Storage

外部链接


跳至内容顶部