如果使用本地存儲如:cookie,localStorage,sessionStorage,Web SQL的情況下,前端存取數據非常容易。
本文介紹,不使用以上本地存儲,只在頁面(標簽里面)上存取數據。
最簡單的一種做法是隱藏表單或者隱藏元素都可以:
<div style="dispaly:none" class="data">${后台穿過來的數據}</div>
這種做法在獲取數據的時,jquery選擇器選擇元素的時候比較麻煩。而且給頁面增加了不必要的內容。
注意,id或者class一般不傳遞數據的(也見過傳遞數據的,很少),他們是作為頁面元素的標示存在的,在jquery選擇器里用來指定元素。如果想獲取,可以這樣:
<div id="user">user</div> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script> var idContent = $("div").attr("id"); alert(idContent); //user </script>
這種用法在關聯相關的元素上用的比較多。
Html5有個data-*屬性可以方便的實現數據存放:
<div id="name" data-test="${后台穿過來的數據}"></div> <script> //獲取的話用jquery里的data()方法: var data-test = $("#name").data("test") </script>
當然,js比較熟悉的話,在標簽里可以自定義屬性來實現存儲數據:
<div id="user" userName="${后台穿過來的數據}">name</div> <script> var user = document. getElementById ( 'user' ) ; var userName = user . getAttribute ( 'userName' ); alert(userName); </script>
以上的方法都能實現保存后端傳過來的數據,而並不在頁面上顯示。
jquery中有屬性選擇器:[],屬性除了保存數據,還可以作為選擇元素使用。