原理：

通過將消息是否查看的數據存寫入localStorage中，點擊查看後，更新localStorage的數據；

文件結構：

index.html -- 列表
detail -- 詳情
remind -- js組件

調用方法：

index.html說明：

1.列表中紅點相對定位在列表文本右上角，d為數據源，amGloble.Remind(d, ‘text‘, ‘id‘, ‘list‘)調用方法；

2.點擊列表，會將每條數據中的文本text，唯一標識id在地址欄傳給detial.html詳情頁；

ul li {
    list-style: none;
    padding: 8px 0;
}

li span {
    position: relative;
}

.point {
    position: absolute;
    top: 0;
    right: -5px;
    width: 6px;
    height: 6px;
    background: red;
    border-radius: 50%;
}

 
<ul id="list"></ul>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="./remind.js"></script>
<script>
    var d = [{ text: ‘亞瑟‘, id: 1 }, { text: ‘凱‘, id: 2 }, { text: ‘露娜‘, id: 3 }];
    // d:數據， text：數據中的文本， key：數據中的唯一標識， dom：插入DOM節點的id名
 

    amGloble.Remind(d, ‘text‘, ‘id‘, ‘list‘);
</script>

detail.html 說明：

1.獲取地址欄參數文本text，唯一標識id；
2.如果拿到本條數據id，說明用戶已經進入詳情頁，則將localStorage中存儲的查看數據更新；

<div id="detail"></div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="./remind.js"
 
></script>
<script>
    var key = amGloble.GetQueryString(‘key‘);  // 獲取地址欄參數
    amGloble.Updata(key);    // 更新查看數據

    var text = amGloble.GetQueryString(‘text‘);
    $(‘#detail‘).text(text);
</script>

remind.js說明：

1.remind()方法是寫入數據，在index.html頁面中調用，默認全部初始化為false，未讀；

2.Update()方法更新數據，在detail.html頁面中調用，查看過這條數據，這把這條數據改為true，已查看；

3.GetQueryString()，是常見的獲取地址欄參數的方法。

(function () {
    window.amGloble = {
        Remind: function (d, text, key, dom) {    // d:數據，text：數據中的文本，key：數據中的唯一標識（id），dom：插入DOM節點的id名
            var checkData = JSON.parse(localStorage.getItem(‘checkData‘));
            if (JSON.stringify(checkData) == ‘null‘) {
                checkData = {};
            };
            var html = ‘‘;
            for (i = 0, l = d.length; i < l; i++) {
                var isChecked = false;
                var isOwn = checkData.hasOwnProperty(d[i][key]);   // 判斷是否包含這個屬性
                if (isOwn) {       // 如果包含這個訂單屬性，則取localStorage中的值
                    isChecked = checkData[d[i][key]];
                } else {           // 初始化都為false
                    checkData[d[i][key]] = false;    // localStorage沒有此訂單查看狀態，則賦值fasle未查看
                    localStorage.setItem(‘checkData‘, JSON.stringify(checkData));       // 轉為JSON字符串，存儲localStorage  
                };

                var point = isChecked ? ‘‘ : ‘<div class="point"></div>‘;   // 已查看不顯示紅點，未查看就顯示紅點
                html += ‘<li><a href="./detail.html?key=‘ + d[i][key] + ‘&text=‘ + d[i].text + ‘"><span>‘ + d[i].text + point + ‘</span></a></li>‘;
            };
            $(‘#‘ + dom).html(html);
        },
        Updata: function (key) {
            if (key) {
                var checkData = JSON.parse(localStorage.getItem(‘checkData‘));
                if (JSON.stringify(checkData) != ‘null‘) {
                    checkData[key] = true;
                    localStorage.setItem(‘checkData‘, JSON.stringify(checkData));
                }
            };
        },
        GetQueryString: function (name) {
            // 獲取地址欄參數
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return decodeURIComponent(r[2]); return null;
        }
    }
})();

再返回到index.html頁面中，則顯示：

第一條我們點擊過鏈接，已查看的數據，在index.html頁面中，不再顯示紅點；

localStorage中存儲的數據是這樣的：

前端實現未讀消息提醒小紅點