国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

HTML5的本地存儲localStorage以及簡單應用

codecook / 612人閱讀

摘要:是中作為在客戶端持久保存數據的方案,與相比,不用在客戶端與服務器之間相互傳遞,且可存儲大量數據,所以應用范圍更廣泛。有兩個方法用于讀取和存儲數據,還有一個方法用于刪除數據。這就是的簡單應用,其實在日常開發中還有很多應用,比如離線購物車。

localStorage是HTML5中作為在客戶端持久保存數據的方案,與cookie相比,localStorage不用在客戶端與服務器之間相互傳遞,且可存儲大量數據(2.5MB-5MB),所以應用范圍更廣泛。
由于許多老式瀏覽器不支持localStorage,所以要先寫個函數判斷瀏覽器是否支持該對象。

function supportLocalStorage() {
  if (typeof localStorage === "object") {
      return true;
  }
  return false;
}

如果運行該函數,返回值為true,那么恭喜你,可以運用本地存儲了。

localStorage有兩個方法用于讀取和存儲數據,還有一個方法用于刪除數據。

localStorage.setItem("name", "Shane");  // 存儲數據
localStorage.getItem("name");  // 讀取數據,返回Shane
localStorage.clear();  // 清空當前域下的所有localStorage

不過這兩個方法在實際應用中很少用到,我們一般都是直接采用直接訪問屬性的方法來讀取和設置。

localStorage.name = "Shane";  // 存儲數據
localStorage.name  // 讀取數據,返回Shane

為了方便理解,我簡單的寫一個關于localStorage的demo供大家參考

一個span顯示數字,一個按鈕,點擊按鈕使數字改變,并存儲到localstorage中。

function Demo(id) {
  this.counter = 0;
  this.mainEl = document.querySelector(id);
  this.numEl = this.mainEl.querySelector("#num"); 
  this.btnEl = this.mainEl.querySelector("#btn"); 
  this.btnEl.addEventListener("click", this.changeCounter.bind(this));  // bind限定作用域
  this.init();
}
Demo.prototype.init = function () {
  /* 若localStorage中counter不存在則為0,存在則讀取 */
  if (localStorage.__counter__ != null) {
    this.counter = localStorage.__counter__;
  } else {
    localStorage.__counter__ = this.counter;
  }
  this.numEl.innerHTML = this.counter;    
}
Demo.prototype.changeCounter = function () {
  this.counter++;
  localStorage.__counter__ = this.counter;
  this.numEl.innerHTML = this.counter;    
}
var demo = new Demo("#demo");

當首次運行頁面時,通過開發工具可以看到localstorage中有一個counter被設置為了0。

當點擊時,不僅頁面中數字發生了變化,localStorage對象中的屬性也發生了變化。

這就是localStorage的簡單應用,其實在日常開發中還有很多應用,比如離線購物車。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/81626.html

相關文章

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<