利用本地存儲實(shí)現(xiàn)注冊來源統(tǒng)計(jì)

標(biāo)簽：

Html5 JavaScript

工作中遇到的需求是这样的
尽可能获取网站注册用户来源，如来自百度搜索，或者其他外链。

实现方式有很多，我们公司采用的是服务器端技术来实现的，我根据这个需求用前端技术实现了下。具体思路如下图所示

存储访问来源：通过referrer获取访问来源url，通过sessionStorage.setItem存储。
获取访问来源：通过sessionStorage.getItem获取。
具体实现细节看代码示例注释
代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取网站注册用户来源</title>
</head>
<body>
    <h4>需求分析</h4>
    <p>1. 利用document的referer可以获取上一个页面，难点是页面的上一个页面可能是从本站的其他页面。</p>
    <p>2. indexOf上一个页面的url如果不包含域名，则将这个url的域名存储在浏览器中。此处采用sessionStorage，存储的数据会在回话结束时删除</p>
    <p>3. 注册成功时获取这个值并保存在数据库中。</p>
    <p>缺点是referer本身的缺点，以及兼容性问题</p>
    <button>假如点击此按钮注册成功</button>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://cdn.staticfile.org/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var source = document.referrer;
            var hostname = window.location.hostname;
            var flag = window.sessionStorage;
            var sourceHost = parseURL(source); // 上一个页面的域名

            // 存在上一个页面，并且不是本域的，设置本地存储
            if (source && hostname != sourceHost) {
                setSessionStorage("source",sourceHost)
            }

            $("button").click(function(){
                alert(getSessionStorage("source"))
            })

            // 设置本地存储的方法
            function setSessionStorage(key,value){
                if (!flag) {return}
                sessionStorage.setItem(key,value)
            }
            // 获取本地存储的方法
            function getSessionStorage(key){
                if (!flag) {return}
                return sessionStorage.getItem(key)  "unknown"
            }
            // 获取url的域名的方法
            function parseURL(url) {  
                 var a =  document.createElement('a');  
                 a.href = url;  
                 return a.hostname;
            }  
        })

    </script>
</body>
</html>

點(diǎn)擊查看更多內(nèi)容