HTML5_Web存储

使用HTML5可以在本地客户端存储数据。

客户端存储数据的两个对象为：

• localStorage - 没有时间限制的数据存储
• sessionStorage - 针对一个 session 的数据存储

调用其中任一对象会创建 Storage对象，在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:

xxxxxxxxxx
 if (typeof (Storage) !== "undefined") {
    // 是的! 支持 localStorage  sessionStorage 对象! 
   // 写一些自己的逻辑 
}else {
   // 抱歉! 不支持 web 存储。 
}

• localStorage：存储的数据没有时间限制

  • 保存数据：localStorage.setItem(key,value)或者localStorage.key=value

  • 读取数据：localStorage.getItem(key)或者localStorage.key

  • 删除单个数据：localStorage.removeItem(key)

  • 删除所有数据：localStorage.clear()

  • 得到某个索引的key：localStorage.key(index)

  xxxxxxxxxx
   if (typeof (Storage) !== "undefined") {
              //设置键值对，存储数据
              localStorage.setItem('name', 'itbaizhan')
              localStorage.setItem('thing', 'study')
              //通过键获取值
              console.log(localStorage.getItem('name'))
              //通过索引获取键名
              console.log(localStorage.key(1))
              setTimeout(function () {
                  //清除数据
                  //    localStorage.removeItem('name')
                  localStorage.clear()
              }, 3000)
  
          }
  

• sessionStorage：当用户关闭浏览器窗口后，数据会被删除

  • 保存数据：sessionStorage.setItem(key,value)或者sessionStorage.key=value
  • 读取数据：sessionStorage.getItem(key)或者sessionStorage.key
  • 删除单个数据：sessionStorage.removeItem(key)
  • 删除所有数据：sessionStorage.clear()
  • 得到某个索引的key：sessionStorage.key(index)

  xxxxxxxxxx
   if (typeof (Storage) !== "undefined") {
              //设置键值对，存储数据
              sessionStorage.age=18
              console.log(sessionStorage.age)
              sessionStorage.setItem('name', 'itbaizhan')
              sessionStorage.setItem('thing', 'study')
              //通过键获取值
              console.log(sessionStorage.getItem('name'))
              //通过索引获取键名
              console.log(sessionStorage.key(1))
              setTimeout(function () {
                  //清除数据
                  sessionStorage.removeItem('name')
                  sessionStorage.clear()
              }, 3000)
  
          }
  

实时效果反馈

1.没有时间限制的存储方式是哪种：

A localStorage

B  sessionStorage

答案

1=>A