HTML5 - Web存储(Web Storage)

前言

在HTML4时代，本地存储基本使用cookie，用 document.cookie 来存储。但其存储大小只有4KB左右，解析也很复杂，不仅不利于开发者，更不利于浏览器。但现在HTML5的出现，弥补了 cookie 的不足，而且开发起来也相当方便快捷。

今天，我们可以使用HTML5在本地存储用户的浏览数据，H5 web存储更加的安全与快速，这些数据不会被保存在服务器(开发者不必担心占用空间)，这些数据只用于用户请求网站数据上，它同样可以存储大量数据，而不影响网站性能。数据以 键/值 对存在， web网页的数据只允许该网页访问使用。

浏览器支持情况：Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储。 【Internet Explorer 7 及更早IE版本不支持web 存储】

Web Storage

HTML5 定义了本地存储规范 Web Storage ， 提供了两种存储类型 API： sessionStorage 和 localStorage，二者的差异主要是数据的保存时长及数据的共享方式。

（1）localStorage：

1. 用于长久保存整个网站的数据，容量大小约为20M左右，存储的数据不会随着用户浏览时会话过期而过期，也就是说直到清除浏览器缓存手动去除才会清除数据。

2. 但浏览器也会因为存储空间的限制或安全原因删除数据，而且类型存储的数据可以同一个浏览器的多个窗口共享。

3. 数据以 键/值 对存在，所以只能存储字符串，如果是JSON对象的话,可以将对象JSON.stringify() 编码后进行存储。

4. 域内安全、永久保存。即客户端或浏览器中来自同一域名的所有页面都可访问localStorage数据且数据除了删除否则永久保存，但客户端或浏览器之间的数据相互独立。

5. 数据不会随着HTTP请求发送到后台服务器

6. 存储数据的大小机会不用考虑，因为在HTML5的标准中要求浏览器至少要支持到4MB。

（2）sessionStorage：

用于临时保存同一窗口(或tab页)的数据，容量大小约为5M左右，在关闭窗口或tab页之后将会删除这些数据。

局限性：

1. 不同浏览器webStorage 和LocalStorage的大小不统一
2. 在浏览器的隐私模式下面是不可读取的
3. 本质上是对字符串的读取，因此存储内容过多时页面会变卡
4. 不能被爬虫抓取

无论数据存储在 localStorage 还是 sessionStorage ，它们都特定于页面的协议。

检查浏览器是否支持

在使用 web 存储前，应检查浏览器是否支持 Web Storage，并给出反馈。

// 自调函数
(function (){
  if(typeof Storage !== "undefined"){
    window.alert(`恭喜，您的浏览器支持web存储！`)
  }else{
    window.alert(`很遗憾，您的浏览器不支持web存储！`)
  }
})()

localStorage 对象

只读的localStorage 属性允许你访问一个Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。localStorage 类似 sessionStorage，但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除 。

另外，localStorage 中的键值对总是以字符串的形式存储。 (需要注意, 和js对象相比, 键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型)。

通过 localStorage.setItem() 增加一个数据项：

localStorage.setItem('demo',"测试")

通过 localStorage.getItem() 读取一个数据项：

var demo = localStorage.getItem('demo')
console.log(demo)// 测试

通过 localStorage.removeItem() 移除一个数据项：

localStorage.removeItem('demo')

通过 localStorage.clear() 移除所有数据项：

// 无需参数
localStorage.clear()

计数小示例：

  
  
  
  document



点击了：



// 让 localStorage.clickBTN值 始终显示 (由于Storage挂载在window特性所以外部可以访问到)
// 获取DOM节点(button>span)
var tips = document.getElementById('tips')
// 显示在tips节点上
tips.innerHTML = localStorage.clickBTN

function demo(){

  // 检测是否支持Storage对象
  if(!localStorage){
      window.alert(`您的浏览器不支持WebStorage!`)
  }

  // 业务逻辑
  if(localStorage.clickBTN){

    // 由于是字符串所以转换为数值型
    localStorage.clickBTN = Number(localStorage.clickBTN) + 1
    // 显示次数
    tips.innerHTML = localStorage.clickBTN
  }else{
    localStorage.clickBTN = 1
  }
  
}

// 非实时打印 localStorage.clickBTN 的值
console.log(localStorage.clickBTN)

每次点击按钮时，localStorage中 key属性(clickBTN)值都会+1。

写在后面

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

1. 保存数据：localStorage.setItem(key,value)
2. 读取数据：localStorage.getItem(key)
3. 删除单个数据：localStorage.removeItem(key)
4. 删除所有数据：localStorage.clear()
5. 得到某个索引的key：localStorage.key(index)

所以，这里就不再赘述 sessionStorage，用法与localStorage基本相同。