前端页面存取数据

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