利用javascript记录访客浏览轨迹-HTML5 Web 存储(localStorage)

利用javascript记录访客浏览轨迹-HTML5 Web 存储(localStorage)
一般我们晓得：WEB可用于会话控制记录数据的方法有cookie和session。
为了记录访客浏览轨迹，记录数据量可能cookie满足困难(当然记录ID应该还是可以的)，今天分享一个HTML5 的WEB储存方法：localStorage：
先看效果代码：
第一个HTML代码是设置记录信息内容：
javascript代码：
<script type="text/javascript">
$(document).ready(function(e) {
if(typeof(Storage)!=="undefined")
{
/*    var zhou = 'davidszhou'
    localStorage.name = zhou
    localStorage.setItem('name','davidszhou')
    /*localStorage.getItem('name')
    $("#davidszhou").html(localStorage.getItem('name'))
*/
    var id = document.getElementsByClassName('ip').item(0).innerHTML
    var tag = document.getElementsByClassName('tags').item(0).innerHTML
    tag = tag.replace('关键词:','')
    /*document.getElementById('davidszhou').innerHTML=tag*/
    localStorage.setItem(id,tag)
    document.getElementById('davidszhou').innerHTML=localStorage.getItem(id)
} else {
    $("#davidszhou").html('不支持')
}



});
</script>
第二个HTML是获取之前记录的数据：
javascript代码：
<script type="text/javascript">
$(document).ready(function(e) {
if(typeof(Storage)!=="undefined")
{
/*    var zhou = '_davidszhou'
    localStorage.name = zhou
    localStorage.setItem('name','123')
    /*localStorage.getItem('name')
    $("#davidszhou").html(localStorage.getItem('name'))
*/
    var id = document.getElementsByClassName('ip').item(0).innerHTML
/*    var tag = document.getElementsByClassName('tags').item(0).innerHTML
*/
    tag = localStorage.getItem(id)
    tag = tag.replace('关键词:','')
    /*document.getElementById('davidszhou').innerHTML=tag*/
    localStorage.setItem(id,tag)
    document.getElementById('davidszhou').innerHTML=localStorage.getItem(id)
} else {
    $("#davidszhou").html('不支持')
}



});
</script>

解释：
一：

HTML 5 WEB储存介绍：
使用HTML5可以在本地存储用户的浏览数据。
早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.
数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

HTML5 的WEB储存 localStorage方法有：
1、保存数据：localStorage.setItem(key,value);
2、读取数据：localStorage.getItem(key);
3、删除单个数据：localStorage.removeItem(key);
4、删除所有数据：localStorage.clear();
5、得到某个索引的key：localStorage.key(index);
当然也可以直接写：
localStorage.davidszhou = 'www.zongk.com'
调用直接用：
localStorage.davidszhou
二：
javascript的localStorage支持大部分浏览器，IE只支持7以上（不包含7）版本使用
如何判断浏览器是否支持localStorage：
if(typeof(Storage)!=="undefined")
{
    // 是的! 支持 localStorage  sessionStorage 对象!
    // 一些代码.....
} else {
    // 抱歉! 不支持 web 存储。
}
##看到即用到这里：typeof():typeof 操作符来检测变量的数据类型
三、
html5的WEB储存：localStorage使用场景预想：
①访客访问网站页面
②使用localStorage记录页面一些特征属性
③不同页面内的内容调取，例如：‘相关推荐’或者‘您可能喜欢看'又或者'下拉更多推荐'的内容可以根据储存在用户本地的信息，自己根据访客浏览页面记录数据在后端做一个数据分析场景，给访客推送精准度更高的相关信息。

总结：
自己的资讯站即将上线，想到即将做到，好像记得之前有一篇文章是期望获得访客搜索关键词做内容匹配，现在有了更好的一个想法，localStorage是没有时间限制的(测试清理浏览器历史可以清除localStorag保存本地的数据，anyway！)，访客的浏览记录会一直储存在本地。
展望：让程序更懂用户（很多大型站点早早的就已经实施记录），希望算法更加完善
测试链接（打开页面可以右键查看源码）：
一、储存信息链接：

HTML5 Web 存储数据

6cdc5a0c407c809b3011fb59ee56286e.html (1.30 KB)

HTML5 Web 获取数据

4051661b40f857c37f1cf969ed5831ee.html (1.30 KB)

TAGS:javascript , localStorage

来自Davids zhou博客原创文章请尊重作者：http://www.zongk.com/zongk/124.html转载请标注此链接