网页中的数据存储

在很多的时候，网页也需要临时去存储数据的。

现在总结几个网页中存数据的通用方案。

url 数据

可以在 url 的参数中带有数据。

<script>
  window.location.href = 'www.thl.com/a?myval=1&mmyval2'
</script>
<script>
  window.location.href = 'www.thl.com/a?myval=1&mmyval2'
</script>

这种方案特点：

  1. 数据量很小，受浏览器限制
  2. 可以跨域(利用 image, 或者 script)
  3. 单次请求

js 全局变量

在页面返回中放置一个全局变量，把后端的数据渲染在这个变量上。形式如下：

<script>
  var data = {{data}}
</script>
<script>
  var data = {{data}}
</script>

data 就是一个字面常量，然后对这个数据进行操作。

这种方案的特点是：

  1. 只能在一个页面中调用，多个页面不行
  2. 可以在 iframe 中可以读取父页面的全局变量
  3. 关闭网页则变量消失

dom element data 的方法

这里的思路是变量与 html 元素绑定在一起。形式如下：

<ul>
  <li onclick="show" id="owl" data-animal-type="bird">喜鹊</li>
</ul>

<script>
  // 第一种方法，原生 dom

  function show(this) {
    // 获得
    this.getAttribute('data-animal-type')

    // 更新
    this.setAttribute("data-animal-type", 20)

    // 删除
    this.removeAttribute("data-animal-type")
  }

  // 第二种， 原生 js 方法,

  var owl = document.getElementById('owl')[0]

  // 获得
  var myval = owl.dataset.animalType

  // 更新
  owl.dataset.manimalTypeyval = 20

  // 删除
  owl.dataset.animalType = null

  // 第三种方法，jquery

  // 获得
  $('#owl').data('animal-type')

  // 更新
  $('#owl').data('animal-type', 20)

  // 置空
  $('#owl').data('animal-type', null)

<script>

<ul>
  <li onclick="show" id="owl" data-animal-type="bird">喜鹊</li>
</ul>

<script>
  // 第一种方法，原生 dom

  function show(this) {
    // 获得
    this.getAttribute('data-animal-type')

    // 更新
    this.setAttribute("data-animal-type", 20)

    // 删除
    this.removeAttribute("data-animal-type")
  }

  // 第二种， 原生 js 方法,

  var owl = document.getElementById('owl')[0]

  // 获得
  var myval = owl.dataset.animalType

  // 更新
  owl.dataset.manimalTypeyval = 20

  // 删除
  owl.dataset.animalType = null

  // 第三种方法，jquery

  // 获得
  $('#owl').data('animal-type')

  // 更新
  $('#owl').data('animal-type', 20)

  // 置空
  $('#owl').data('animal-type', null)

<script>

需要注意的是：

  1. 第二种方法，如果都是字母，则大写变成小写不变，而有- 则会把后面的字母变成大写，如 animal-type => animalType, a-B => aB, a-b => ab
  2. 第三种，jquery 也会像第二种方法这么做

这种方案的特点是：

  1. 可以和特定 dom element 绑定，在操作 dom 时，就很方便
  2. 不太自由，不能存太复杂的数据，虽然并没说，能放多少数据
  3. 关闭页面就消失

cookie

是把数据存放在 cookie 中。操作就是 cookie 的 js 的原生操作。

<script>
  document.cookie = "a=b;"
</script>
<script>
  document.cookie = "a=b;"
</script>

这种方案的特点是：

  1. cookie 大小有限
  2. 每次都会把 cookie 传到后端，费流量
  3. 同站点，多个页面可以共享
  4. 生存周期要看 cookie 的设置时间
  5. Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在

sessionStorage

针对对话级的存储方案，这是 session 级。

<script>
  function() {
    window.sessionStorage.setItem('myval', '1')
    window.sessionStorage.getItem('myval')
  }
</script>
<script>
  function() {
    window.sessionStorage.setItem('myval', '1')
    window.sessionStorage.getItem('myval')
  }
</script>

这种方案的特点是：

  1. 仅仅是为了在本地“存储”数据而生
  2. 数据量大

localStorage

localStorage 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

<script>
  function() {
    window.localStorage.setItem('myval', '1')
    window.localStorage.getItem('myval')
  }
</script>
<script>
  function() {
    window.localStorage.setItem('myval', '1')
    window.localStorage.getItem('myval')
  }
</script>

这种方案的特点是：

  1. 数据量大
  2. 不会过期

indexeddb

webSQL 已经挂了，不能使用。

indexeddb 有更丰富的功能，包括事特等

<script>
  var DBOpenRequest = window.indexedDB.open('project', 1);
</script>
<script>
  var DBOpenRequest = window.indexedDB.open('project', 1);
</script>

这篇文章可能更能说明

后端接口

后端接口，能把数据都放在一个数据库中，供下次调用。

总结

类型

url 传参

js 全局变量

data 属性

cookie

sessionStoreage

localStorage

indexddb

后端接口

目的

页面交互

页面交互

页面交互

http 协议交互

本地存储

本地存储

本地存储

服务器存储

数据大小

url 长度

小量

最小量

较小

500万字符

500万字符

50MB

无限

请求协带

带上

不带

不带

带

不带

不带

不带

ajax 请求，带

页面共享

可以　

可以

不行

可以

可以

可以

可以

可以

跨域

可以

不行

不行

不行

不行

不行

不行

可以

生存周期

单次

单次

单次

视设置时间而定

会话时间

永久

永久

永久

适用场景

小数量，单次请求

后端渲染

后端渲染

小数据量与后端交互

本地会话级

本地永久

本地永久

服务器

要根据自己的项目选择合适的存储方案。