HT5本地存儲（web sql、sessionStorage、localStorage）

時間 2019-11-26

標籤 ht5 本地存儲 web sql sessionstorage localstorage 欄目 HTML 简体版

原文原文鏈接

咱們知道js寫的效果，每次刷新都是重新執行，是不存在記錄操做的，主要是大部分的效果不須要這樣的處理(一個tab切換，焦點圖確定不須要記住運行到哪裏，刷新重新開始就行了)！javascript

在html5以前，前端寫的效果然的須要存儲一些記錄，咱們都是使用cookie，對於網站換膚其實可使用這個處理，今天咱們介紹的sessionStorage和localStorage其實就是相似cookie的東西，不過他比cookie存儲更大，操做更加容易，更符合咱們的使用習慣。css

一.cookie的使用html

咱們先回憶cookie的使用：前端

1.cookie的讀取html5

document.cookie="userId=01"; 
document.cookie="userName=hulk";
alert(document.cookie);

咱們會看到設置的內容，咱們知道漢字很特殊，做爲值設置咱們會使用escape進行編碼處理，和unescape解碼java

2.cookie設置過時web

document.cookie="userId=828; expiress=GMT_String";
這個就很是重要了，咱們通常會選擇3天，7天或者1個月，這樣咱們把用戶的帳戶存入cookie，下次就能夠在不超出過時時間內直接登陸了，延時的話咱們會利用date對象而且轉爲gmt形式。sql

3.cookie刪除數據庫

咱們知道到了設置的過時時間會刪除cookie，咱們對cookie的刪除就是把過時設置到當前日期以前的日子json

4.cookie詳細介紹

對於cookie的具體操做咱們能夠看個人這篇介紹：http://my.oschina.net/tbd/blog/490310 介紹內容在博客中間位置。

5.基於cookie的tab切換效果

其原理就是把點擊所在的索引存入cookie，每次刷新頁面會讀取cookie的這個數值作tab默認位置的設置，上面說這種處理是在開玩笑，不過這個例子更讓你們容易。

你們在服務器環境下運行，涉及到存儲這一塊：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>cookie</title>
    <style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
/*demo*/
</style>
</head>
<body>
<div style=" height:300px; width:300px;">
 <div id="list" style=" height:50px; line-height:50px; background:#CC6;">
     <span>標題1</span>
        <span>標題2</span>
        <span>標題3</span>
    </div>
    <div id="con" style=" height:250px;">
     <div style="height:250px;">內容1</div>
        <div style="height:250px;">內容2</div>
        <div style="height:250px;">內容3</div>
    </div>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
 //cookie索引位置獲取
 var cookiei=null;
 var strCookie=document.cookie; 
 var cookielist=strCookie.split(";");
 var key="ys";
 for(var i=0;i<cookielist.length;i++){ 
  //alert(unescape(cookielist[i].split("=")[1]));
     if(cookielist[i].split("=")[0]=="ys"){
      cookiei=unescape(cookielist[i].split("=")[1]);
     };
 };
 var st=0;
 var real=cookiei||st;
 //選擇器查找
 var list=document.getElementById("list"); 
 var listspan=list.getElementsByTagName("span")
 var con=document.getElementById("con");
 var condiv=con.getElementsByTagName("div");
 //初始化設置，有cookie根據cookie設置無默認用第一個
 for(var i=0;i<listspan.length;i++){
  if(i==real){
   listspan[i].style.color="#fff";
   condiv[i].style.display="block";
  }else{
   listspan[i].style.color="#000";
   condiv[i].style.display="none";
  };
 };
 //事件設置
 for(var i=0;i<listspan.length;i++){
  listspan[i].onclick=function(){
     //alert(this.innerHTML)
    for(var j=0;j<listspan.length;j++){
    if(listspan[j]==this){
      listspan[j].style.color="#fff";
      condiv[j].style.display="block";
      document.cookie="ys="+escape(j); 
    }else{
     listspan[j].style.color="#000";
      condiv[j].style.display="none"
    };
      };
  };
 };
 
};
</script>
</html>

咱們點擊到第三個，咱們在此刷新發現會定位到第三個顯示，實現了記憶處理。

二.sessionStorage、localStorage 本地存儲帝時代

上面涉及到了cookie的介紹，cookie是放在document下，咱們感受有些不能適應是否是，應該在window下吧，好吧就是在document下，不過咱們ht5的新特性：

window.sessionStorage
window.localStorage

實實在在是在window下。咱們必定要記住使用時用哪一個對象，與cookie區分。

1.設置localStorage

localStorage.a1 = "aaa";
localStorage["a2"] = "bbb";
localStorage.setItem("a3","ccc");

前2個和操做對象同樣，後面是提供的方法處理

2.獲取localStorage

alert(localStorage.a1);
alert(localStorage["a2"]);
alert(localStorage.getItem("a3"));

同設置，最後的是方法獲取

3.刪除localStorage

localStorage.removeItem("a3");//清除c的值
alert(localStorage.getItem("a3"));

清除後，返回null，除了單個清除還有所有清除：

localStorage.clear();
alert(localStorage.a1);
alert(localStorage["a2"]);
alert(localStorage.getItem("a3"));

另外一個用法和local差很少就不在作介紹，只不過session會在關閉頁面後自動刪除，同服務端的session同樣機制。

三.Html5數據庫 web SQL

ht5的新特性中，爲咱們添加了數據庫的處理功能，咱們能夠向服務端同樣建立數據庫，數據表，增刪改查了。

Html5數據庫API是以一個獨立規範形式出現，它包含三個核心方法：

一、openDatabase：這個方法使用現有數據庫或建立新數據庫建立數據庫對象。

二、transaction：這個方法容許咱們根據狀況控制事務提交或回滾。

三、executeSql：這個方法用於執行真實的SQL查詢。

下面是一個使用的實例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>web sql</title>
    <style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
/*demo*/
</style>
</head>
<body>
<div id="status"></div> 
</body>
<script type="text/javascript">
var db = openDatabase('demodb', '1.0', 'demo', 2 * 1024 * 1024);  
  
db.transaction(function (tx) { 
    tx.executeSql('CREATE TABLE IF NOT EXISTS USERS (id unique, name ,sex)');  
    tx.executeSql('INSERT INTO USERS (id, name ,sex) VALUES (1, "小剛" ,"男")');  
    tx.executeSql('INSERT INTO USERS (id, name ,sex) VALUES (2, "小紅" ,"女")');  
    tx.executeSql('INSERT INTO USERS (id, name ,sex) VALUES (3, "小明" ,"男")');  
  
});
db.transaction(function (tx) { 
    tx.executeSql('SELECT * FROM USERS', [], function (tx, results) { 
  var status=document.getElementById("status");
  var rows = results.rows;  
  for(var i=0;i<rows.length;i++){
   var arr=document.createElement("div");
   arr.innerHTML=rows[i].name+"--"+rows[i].sex;
   status.appendChild(arr);
  };
    
 }, null);  
});  
</script>
</html>

咱們瞭解其中的的各個使用方法：

1.打開數據庫

openDatabase('demodb', '1.0', 'demo', 2 * 1024 * 1024);

打開數據庫，沒有時建立，第一個參數demodb是數據庫名稱，第三個參數demo是描述，第四個是的大小

2.執行處理

db.transaction(function (tx) {

});

咱們的全部數據表的處理程序都在在這個內部。

3.建立表

tx.executeSql('CREATE TABLE IF NOT EXISTS USERS (id unique, name ,sex)');

建立表 USERS，沒有時會建立，定義有三個字段，id字段不能重複

4.插入記錄