网页中的数据存储

网页中的数据存储

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

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

url 数据

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

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

这种方案特点：

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

js 全局变量

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

<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>

需要注意的是：

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>

这种方案的特点是：

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

sessionStorage

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

<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>

这种方案的特点是：

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

indexeddb

webSQL 已经挂了，不能使用。

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

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

这篇文章可能更能说明

后端接口

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

总结

类型	url 传参	js 全局变量	data 属性	cookie	sessionStoreage	localStorage	indexddb	后端接口
目的	页面交互	页面交互	页面交互	http 协议交互	本地存储	本地存储	本地存储	服务器存储
数据大小	url 长度	小量	最小量	较小	500万字符	500万字符	50MB	无限
请求协带	带上	不带	不带	带	不带	不带	不带	ajax 请求，带
页面共享	可以	可以	不行	可以	可以	可以	可以	可以
跨域	可以	不行	不行	不行	不行	不行	不行	可以
生存周期	单次	单次	单次	视设置时间而定	会话时间	永久	永久	永久
适用场景	小数量，单次请求	后端渲染	后端渲染	小数据量与后端交互	本地会话级	本地永久	本地永久	服务器

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