前端頁面存取數據


如果使用本地存儲如: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中有屬性選擇器:[],屬性除了保存數據,還可以作為選擇元素使用。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM