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