前端页面存取数据

如果使用本地存储如: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中有属性选择器:[],属性除了保存数据,还可以作为选择元素使用。

原文地址:https://www.cnblogs.com/xiaochongchong/p/5498343.html