本地存儲localStorage以及它的封裝接口store.js的使用

xiaolinbang 發布于2019-08-20 12:26 / 1639人閱讀

摘要：本地存儲是提供的在客戶端存儲數據的新方法，主要作用是將數據保存在客戶端中，并且數據是永久保存的，除非人為干預刪除。的使用的基本有存儲的值為獲取的值移除的記錄清空存儲返回所有存儲遍歷所有存儲。

本地存儲localstorage

localstorage 是 HTML5 提供的在客戶端存儲數據的新方法，主要作用是將數據保存在客戶端中，并且數據是永久保存的，除非人為干預刪除。

localstorage作為本地存儲來使用，解決了cookie存儲空間不足的問題：cookie中每條cookie的存儲空間為4k，但localStorage的存儲空間有5M大小。另外，相比于cookie，localStorage可以節約帶寬，在同一個域內，瀏覽器每次向服務器發送請求，http都會帶著cookie，使cookie在瀏覽器和服務器之間來回傳遞，浪費帶寬，但localStorage將第一次請求的數據直接存儲到本地，避免了來回傳遞。

localstorage 的局限
1、只有版本較高的瀏覽器中才支持 localstorage
2、localStorage的值的類型限定為string類型，使用 JSON 時需轉換
3、如果存儲內容過多會消耗內存空間，導致頁面變卡，因為localStorage本質上是對字符串的讀取

localstorage 有兩種方法：分別是 localstorage 和 sessionStorage 。sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口后，數據會被刪除。localStorage與sessionStorage的唯一區別就是localStorage屬于永久性存儲，而sessionStorage在當會話結束的時候，sessionStorage中的鍵值對會被清空。

localstorage的用法
我們在使用localStorage的時候，需要先判斷瀏覽器是否支持localStorage這個屬性：

if(window.localStorage){
 alert("瀏覽器支持localStorage");
 
 }else{
 alert("瀏覽器支持localStorage");
 }??

接下來分別是它的寫入、讀取、刪除

//localStorage的寫入
var storage=window.localStorage;
 storage["a"]=1;   //寫入a字段
 storage.b=2;   //寫入b字段
 storage.setItem("c",3);   //寫入c字段
 console.log(typeof storage["a"]);  //string
 console.log(typeof storage["b"]);  //string
 console.log(typeof storage["c"]);??//string 
//localStorage的讀取
var a=storage.a;
 console.log(a);  //1
var b=storage["b"];
 console.log(b);  //2
var c=storage.getItem("c");
 console.log(c);??  //3
//localStorage的刪除
storage.clear();  //將localStorage的所有內容清除

使用key()方法，獲取相應的鍵

var storage=window.localStorage;
 storage.a=1;
 storage.setItem("c",3);
 for(var i=0;i
對用戶訪問頁面的次數進行計數:
if(localStorage.pagecount){
 localStorage.pagecount = Number(localStorage.pagecount)+1;
 }else{
 localStorage.pagecount = 1;
 }
 document.write("你第"+localStorage.pagecount+"訪問該頁面");??
sessionStorage的用法和localStorage一樣用法和localStorage一樣，但是關閉計數頁面后再打開時會重新開始計數。
store.js
GitHub地址
store.js 是一個兼容所有瀏覽器的 LocalStorage 包裝器，不需要借助 Cookie 或者 Flash來實現。它提供非常了簡潔的 API 來實現跨瀏覽器的本地存儲功能。
store.js的使用 
store.js的基本API有：
store.set(key, val)  //存儲 key 的值為 val；
store.get(key)  //獲取 key 的值；
store.remove(key) //移除 key 的記錄；
store.clear()  //清空存儲；
store.getAll() //返回所有存儲；
store.forEach() //遍歷所有存儲。

使用store.js提供的方法，需要先引入store.min.js插件:
 

首先判斷瀏覽器是否支持本地存儲
  
set
單個存儲字符
格式：store.set(key, data[, overwrite]);
store.set("name","mavis"); //存儲name的值為 mavis
store.set("name","angel");  //將name的值存儲為angel
在控制臺顯示

get
獲取存入的key值
格式：store.get(key[, alt])
store.set("name","mavis");
store.set("name","angel");
store.get("name");  //angel
remove
移除key的記錄
store.remove("name");
在控制臺可以看到name的值已經被移除

clear
清除所有本地存儲：store.clear();
getAll
從所有存儲中獲取值
格式：store.getAll()
store.set("name","mavis");
store.getAll().user.name == "mavis";   //true
forEach
遍歷所有的值
store.set("user",{name:"mavis",likes:"javascript"}); // 存儲對象 - 自動調用 JSON.stringify
var user = store.get("user"); // 獲取存儲的對象 - 自動執行 JSON.parse
store.forEach(function(key, val) {
                  console.log(key, "==", val)
            })  // 遍歷所有存儲

使用store,js簡化了使用localStorage原生方法的操作

LocalStorage 并沒有提供過期時間接口，只能通過存儲時間做比對實現。

最后介紹一下在瀏覽器中查看LocalStorage的方法：F12打開開發人員工具→Application→Storage→LocalStorage

云服務器 GPU云服務器 localstorage使用 localstorage存儲存儲localstorage 免費localstorage存儲對象

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

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

本地存儲localStorage的封裝，提供簡單的API

摘要：是一個實現了瀏覽器的本地存儲的封裝，不是通過和技術實現，而是使用。小弟我主要是用于，，手機等先進瀏覽器里面跑。 showImg(https://img.shields.io/github/issues/jaywcjlove/store.js.svg); showImg(https://img.shields.io/github/forks/jaywcjlove/store.js.svg...

Miyang 2019-08-21 12:38 評論0 收藏0
推薦輕量高效無依賴的開源JS插件和庫

摘要：彈出層是一個輕量級的庫用于管理工具提示和彈窗效果。一個帶有的跨瀏覽器富文本編輯器。由制作，適用于每天寫作的富文本編輯器。輕量的操作庫。是一個快速簡單輕量級的瀏覽器功能檢測庫。它沒有任何的依賴，并且壓縮后僅有。極小跨平臺的全屏插件。在這里維持一個持續更新的地方圖片 baguetteBox.js - 是一個簡單易用的響應式圖像燈箱效果腳本。demo Lightgallery.js -...

AlphaWallet 2019-08-02 15:56 評論0 收藏0
推薦輕量高效無依賴的開源JS插件和庫

摘要：彈出層是一個輕量級的庫用于管理工具提示和彈窗效果。一個帶有的跨瀏覽器富文本編輯器。由制作，適用于每天寫作的富文本編輯器。輕量的操作庫。是一個快速簡單輕量級的瀏覽器功能檢測庫。它沒有任何的依賴，并且壓縮后僅有。極小跨平臺的全屏插件。在這里維持一個持續更新的地方圖片 baguetteBox.js - 是一個簡單易用的響應式圖像燈箱效果腳本。demo Lightgallery.js -...

lushan 2019-08-30 13:09 評論0 收藏0
推薦輕量高效無依賴的開源JS插件和庫

摘要：彈出層是一個輕量級的庫用于管理工具提示和彈窗效果。一個帶有的跨瀏覽器富文本編輯器。由制作，適用于每天寫作的富文本編輯器。輕量的操作庫。是一個快速簡單輕量級的瀏覽器功能檢測庫。它沒有任何的依賴，并且壓縮后僅有。極小跨平臺的全屏插件。在這里維持一個持續更新的地方圖片 baguetteBox.js - 是一個簡單易用的響應式圖像燈箱效果腳本。demo Lightgallery.js -...

shuibo 2019-08-22 10:44 評論0 收藏0