[Html 5] WebStorage - localStorage和sessionStorage 基本使用方法

转载 2015年07月08日 09:25:55

前言

※2014-07-15更新文章說明sessionStorage

 

最近案子需要用到Html 5的localStorage加快開發速度,所以研究了一下基本使用方法

 

說明

Html 5的Web Storage分兩種,一個是sessionStorage,另一個是localStorage,兩者差別就差在生命周期的不同而已,

只要會localStorage的使用方法,另一個sessionStorage寫法也差不多就會。

Web Storage特性:

1.儲存資料在Client端的瀏覽器,有點類似Cookie,不過Web Storage寫程式存取都是寫在Client端Javascript裡,Server端用不到

2.都是使用key / value pair的方式 給值或取值

3.儲存資料容量至少5MB以上,比Cookie大很多

4.不會像Cookie一樣,隨著Request發送給Server端,因為Web Storage只作用在Client端瀏覽器,不會占用頻寬,不影響網站效能,所以可以把size大一點&安全性低的資料儲存在Web Storage,提升網站效能。

5.只能儲存字串,想儲存物件的話,底下實作會說明

6.儲存在各瀏覽器中,所以在Chrome的Web Storage和IE的Web Storage是不會共用的,各自分開

7.Web Storage的值類似Cookie依網站區別,所以不同網站給相同的Web Storage值是不會共用的,是分開的

8.生命周期:

    8-1:localStorage跨瀏覽器分頁、新視窗、甚至是關閉瀏覽器後再打開,localStorage仍然會存在,然後永久不逾期↓

    When do items in HTML5 local storage expire?

    8-2:sessionStorage生命周期只存在瀏覽囂的單一分頁,也就是另開新分頁的話,又是一個新的sessionStorage,預設無逾期時間,除非關閉該分頁、關閉瀏覽器等,sessionStorage就會消失。

9.支援瀏覽器:Internet Explorer 8+, Firefox, Opera, Chrome, Safari

 

 

待會底下會說明使用者如何用自己的瀏覽器自行清除Web Storage,或開發者寫程式來清除Web Storage

以上大概這樣,更詳細的說明請參考底下老師&專業級文章

HTML5 Web Storage by 蔡煥麟老師

HTML5 Web Storage  - w3schools.com

 

用法

※通通都是寫在javascript裡

 

1.判斷瀏覽器是否支援Web Storage

//此瀏覽器支援Web Storage
if (typeof (Storage) !== "undefined") {
     
else {
    alert("此瀏覽器不支援Web Storage");
}

↓以下列舉localStorage寫法當例子(sessionStorage寫法差不多)

 

2.localStorage給值寫法,挑一個自己想用的就好

window.localStorage.setItem("Key名稱""字串值");
localStorage.setItem("Key名稱""字串值");//前面的window. 可省略不寫
localStorage["Key名稱"] = "字串值";//這寫法有cookie的fu
localStorage.Key名稱 = "字串值";

3.localStorage取值寫法,挑一個自己想用的就好

var str = window.localStorage.getItem("Key名稱");
var str = localStorage.getItem("Key名稱");
var str = localStorage["Key名稱"]
var str = localStorage.Key名稱;
//↑以上注意取出來的值會是字串型別

4.判斷某localStorage是否存在

1 if (localStorage.Key名稱)
2 {//此localStorage有存在
3                     
4     var str  =  localStorage.Key名稱; //把值取出來
5  }

5.移除單個localStorage

localStorage.removeItem("Key名稱");

6.清除該網站所有的localStorage

localStorage.clear();

 

 

實作

以下是綜合範例程式碼,注意有引用到jQuery Library

※↓localStorage單純 給字串 取字串

<script type="text/javascript">
    $(document).ready(init);
 
    function init() {
        //新增數字
        $("input#addCount").click(function () {
            //此瀏覽器支援Web Storage
            if (typeof (Storage) !== "undefined") {
                //注意Key有區分大小寫
                if (localStorage.clickcount) {//如果clickcount這個key裡有值的話
                   
                    localStorage.clickcount = Number(localStorage.clickcount) + 1;//把字串轉型成數字※Number()同時支援parseInt()和parseFloat()
                } else {//localStorage.clickcount 無值的話
                    //localStorage只能儲存字串
                    localStorage.clickcount = 1;//給預設1,此數字會自動轉型成字串,大概是js的特性?
                }
                $("div#result").html("目前localStorage的值為 " + (typeof (localStorage.clickcount) == "undefined" ? 0 : Number(localStorage.clickcount)));
 
            } else {
 
                alert("此瀏覽器不支援Web Storage");
            }
 
        });//end click 註冊事件
 
 
        $("input#removeOne").click(function () {
 
            //此瀏覽器支援Web Storage
            if (typeof (Storage) !== "undefined") {
                //注意Key有區分大小寫
                localStorage.removeItem("clickcount");
 
                $("div#result").html("目前localStorage的值為 " + (typeof (localStorage.clickcount) == "undefined" ? 0 : Number(localStorage.clickcount)));
 
            } else {
                alert("此瀏覽器不支援Web Storage");
            }
 
        });//end click 註冊事件
 
 
 
 
        $("input#clearAll").click(function () {
 
            //此瀏覽器支援Web Storage
            if (typeof (Storage) !== "undefined") {
 
                localStorage.clear();//清除所有localStorage
 
                $("div#result").html("目前localStorage的值為 " + (typeof (localStorage.clickcount) == "undefined" ? 0 : Number(localStorage.clickcount)));
 
            } else {
 
                alert("此瀏覽器不支援Web Storage");
            }
 
        });//end click 註冊事件
 
 
 
 
    }
 
 
 
 
</script>
 
<input type="button" value="加1"  id="addCount"/>
<br />
  
<input type="button" value="remove單個localStorage"  id="removeOne"/>
<br />
  
<input type="button" value="清除所有localStorage"  id="clearAll"/>
<br />
  
<!--呈現結果↓-->
<div id="result">
 
    
 
 
</div>

localStorage線上Demo,請使用IE開啟

http://shadowjapan.blob.core.windows.net/dotblogsshare/StringSample.html

 

 

※↓localStorage assign 物件寫法,要利用JSON.stringify(js物件)序列化成字串,再搭配JSON.parse(json字串)轉成JSON物件的方式處理

※此兩個js函式都是Javascript內建

 

<script type="text/javascript">
    $(document).ready(init);
    //宣告js物件類別
    function Car() {
        //點擊次數
        this.clickcount = 0;
    }
    function init() {
 
        //新增數字
        $("input#addCount").click(function () {
            //此瀏覽器支援Web Storage
            if (typeof (Storage) !== "undefined") {
                //注意Key有區分大小寫
                if (localStorage.MyObj) {//如果localStorage.MyObj這個key裡有值的話
                    //把json字串轉型成json物件
                    var objCar = JSON.parse(localStorage.MyObj);//抓出json物件
                    //assign value
                    objCar.clickcount = Number(objCar.clickcount) + 1;//轉型成數字※Number()同時支援parseInt()和parseFloat()
                    localStorage.MyObj = JSON.stringify(objCar);//重新把car物件序列化json字串 丟給 localStorage.MyObj
                } else {//localStorage.MyObj 無值的話
 
                    var objCar = new Car();//new 一個物件
                    objCar.clickcount = 1;//給預設1
                    //localStorage只能儲存字串,如果想存js物件的話,就要把該js物件序列化成json字串存進去
                    localStorage.MyObj = JSON.stringify(objCar);//序列化成json字串
 
                }
                //顯示結果↓
                var result = "";
                if ((typeof (localStorage.MyObj) == "undefined")) {
                    result = 0;
                } else {
                    //轉型成json物件
                    var objCar = JSON.parse(localStorage.MyObj);
                    result = objCar.clickcount;
                }
                $("div#result").html("目前localStorage的值為 " + result);
 
            } else {
 
                alert("此瀏覽器不支援Web Storage");
            }
 
        });//end click 註冊事件
 
 
        $("input#removeOne").click(function () {
 
            //此瀏覽器支援Web Storage
            if (typeof (Storage) !== "undefined") {
                //注意Key有區分大小寫
                localStorage.removeItem("MyObj");
 
                if (typeof (localStorage.MyObj) == "undefined") {
                    $("div#result").html("目前localStorage的值為 " + 0);
                }
 
 
            } else {
                alert("此瀏覽器不支援Web Storage");
            }
 
        });//end click 註冊事件
 
 
 
 
        $("input#clearAll").click(function () {
 
            //此瀏覽器支援Web Storage
            if (typeof (Storage) !== "undefined") {
 
                localStorage.clear();//清除此網站所有localStorage
                if (typeof (localStorage.MyObj) == "undefined") {
                    $("div#result").html("目前localStorage的值為 " + 0);
                }
 
 
            } else {
 
                alert("此瀏覽器不支援Web Storage");
            }
 
        });//end click 註冊事件
 
 
 
 
    }//end init
 
 
 
 
</script>
 
<input type="button" value="加1"  id="addCount"/>
<br />
  
<input type="button" value="remove單個localStorage"  id="removeOne"/>
<br />
  
<input type="button" value="清除所有localStorage"  id="clearAll"/>
<br />
  
<!--呈現結果↓-->
<div id="result">
 
    
 
 
</div>

localStorage線上Demo,請使用IE開啟

http://shadowjapan.blob.core.windows.net/dotblogsshare/ObjSample.html

 

sessionStorage線上Demo(出自w3schools網站):

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_webstorage_session

體驗生命周期方法↓

image

image

接下來再按鍵盤的Ctrl+N,另開瀏覽器新視窗,再去點擊,次數還是會從1開始算起

整個瀏覽器關閉再重開進入相同網址去點擊,次數也是從1算起

所以應該可以體會 sessionStorage只存活在單一個分頁

But,要注意一件事

如果使用Chrome瀏覽器的話,當關閉分頁,再按Ctrl+Shift+T鍵把分頁叫回來時

sessionStorage又會復活回來,在IE10不會。

 

 

 

最後,使用者Client端瀏覽器也可以自行刪除Web Storage

※我使用的是IE10

image

按「刪除」鈕

image

image

image

image

另外,提一下

image

 

※2014-07-16補充:

使用Google Chrome瀏覽器的人可以在使用到Web Storage的頁面按下F12鍵叫出開發者工具,查看localStorage或sessionStorage的狀況

chromeDemo

 

相关文章推荐

(八)webStorage使用实例——利用storage事件实时监视webStorage中的数据

在HTML5中,可以通过window对象的storage事件进行监听并指定其事件处理函数的方法来定义当其在其他页面中修改sessionStorage或localStorage中的值时所要执行的处理,代...
  • lmb55
  • lmb55
  • 2015年07月03日 13:29
  • 1130

HTML5 localStorage and sessionStorage

HTML5 提供两种web存储方法,localStorage 与 sessionStorage localStorage 与 sessionStorage 区别 localStorag...
  • fdipzone
  • fdipzone
  • 2014年05月11日 22:04
  • 32489

cookie、localStorage、sessionStorage的有效期和作用域问题

。。。。待续
  • atgwwx
  • atgwwx
  • 2013年11月14日 22:15
  • 10360

对cookie、localStorage、sessionStorage的理解

1、cookie 在客户端记录信息确定用户身份。由于HTTP是一种无状态的协议,服务器单从网络连接上无从知道客户身份。就给客户端们颁发一个通行证,每人一个,无论谁访问都必须携带自己通行证。这...

3分钟学会sessionStorage用法

   前言:   因最近移动端开发过程中遇到一个运营提出的所谓技术难点需求,对于原生APP来说轻而易举,毕竟自己的APP用户操作指哪打哪,但是H5该怎么做?H5就实现不了么?对于一个爱研究攻克...

【H5】localStorage、sessionStorage用法总结

localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。 他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其...
  • DHASA
  • DHASA
  • 2016年02月25日 18:39
  • 6885

前台属性----localStorage、sessionStorage用法总结

localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。 他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实...

sessionStorage、localStorage用法总结

作用:首先说明一下:sessionStorage和localStorage一样都是用来存储客户端临时信息的对象。 存储内容的数据类型:两者皆储存字符串类型的数据。 生命周期:sessionStorag...

html5 Web存储的localStorage和sessionStorage的使用方法【图文说明】

使用HTML5 Web存储的localStorage和sessionStorage方式进行Web页面数据本地存储。 页面参考如下图,能将页面上的数据进行本地存储。并能读取存储的数据显示在页面上。...

html5 webStorage:localStorage sessionStorage

localStorage sessionStorage的使用: sessionStorage使用方法完全同localStorage一致: if(typeof(Storage)!=="undefined...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[Html 5] WebStorage - localStorage和sessionStorage 基本使用方法
举报原因:
原因补充:

(最多只允许输入30个字)