網頁中的數據存儲

在很多的時候，網頁也需要臨時去存儲數據的。

現在總結幾個網頁中存數據的通用方案。

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 請求，帶
頁面共享	可以	可以	不行	可以	可以	可以	可以	可以
跨域	可以	不行	不行	不行	不行	不行	不行	可以
生存周期	單次	單次	單次	視設置時間而定	會話時間	永久	永久	永久
適用場景	小數量，單次請求	后端渲染	后端渲染	小數據量與后端交互	本地會話級	本地永久	本地永久	服務器

要根據自己的項目選擇合適的存儲方案。