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

作者:Davidszhou   来源:SEO优化博客   时间:2018-04-18 06:01:08   点击:

利用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 存储数据
文件类型: .html 6cdc5a0c407c809b3011fb59ee56286e.html (1.30 KB)

二、获取信息链接:

HTML5 Web 获取数据
文件类型: .html 4051661b40f857c37f1cf969ed5831ee.html (1.30 KB)


 

 

 

 

TAGS:javascript , localStorage

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

网站统计
文章总数:129
今天发布:0
软件资源数:18