クッキーや設定ストレージの代替手段はありますか

Question

Blogger plataformにブログ（https://simulatorio.blogspot.com.br/?m=2）があります。私がしたいのは、個々の投稿にチェックボタンを置き、マークされた投稿を読んで保存するために何らかの仕組み（クッキー、PHPなど）を使用することです。

例：誰かがページを訪問し、読んだとしてマークします。その人が別の日に戻って同じページを訪れると、それはまだ読まれているとマークされます。また、未読としてマークすることも可能です。

各訪問者の各ページに関するそのような情報を保存するにはどうすればよいですか？私はそれがクッキーで可能だと思う（しかし、私はそれを使う方法も知らない）。 blogspot.comで使用できるCookieの代替手段はありますか？

Answer 1

だから、ちょっとバニラのJavascriptスニペットを作成しました。 href属性を配列に保存します。この属性は、JSONとしてlocalStorageに保存されます。とにかくそれを拡張/編集することができます - それはかなり容易にコード化されています - 私はそれを多分1または2のサイドプロジェクトで使用します。

HTML：

<h1>Repo services</h1> 
<ul> 
    <li><a class="trackVisit" href="https://github.com">GitHub</a></li> 
    <li><a class="trackVisit" href="https://gitlab.com/explore">GitLab</a></li> 
    <li><a class="trackVisit" href="https://www.codeplex.com/">CodePlex</a></li> 
    <li><a class="trackVisit" href="https://bitbucket.org/">Bitbucket</a></li> 
</ul> 

<button>Reset</button> 

思い出した/保存/追跡する必要があるすべてのリンクはクラスtrackVisitを持つことになります。したがって、ページ上のすべてのリンクがこのようにスタイル付けされるわけではありません。

// helper function 
var forEach = function(array, callback, scope) { 
    for (var i = 0; i < array.length; i++) { 
    callback.call(scope, i, array[i]); 
    } 
}; 

// init 
if (localStorage.getItem('visitedLinks') === null) { 
    localStorage.setItem('visitedLinks', JSON.stringify([])); 
} 

// get already visited links 
function getVisitedLinks() { 
    return JSON.parse(localStorage.getItem('visitedLinks')); 
} 

// save visits 
forEach(document.querySelectorAll('a.trackVisit'), function(index, element) { 
    element.addEventListener('click', function saveVisit() { 
    var visitedLinks = getVisitedLinks(); 
    if (visitedLinks.indexOf(element.getAttribute('href')) === -1) { 
     visitedLinks.push(element.getAttribute('href')); 
    } 
    localStorage.setItem('visitedLinks', JSON.stringify(visitedLinks)); 
    refreshVisits(visitedLinks); 
    }); 
}); 

// style the links 
function refreshVisits(visitedLinks) { 

    forEach(document.querySelectorAll('a'), function(index, link) { 
    link.classList.remove('visited'); 
    }); 

    visitedLinks.forEach(function(el, key) { 
    if (document.querySelector('a[href="' + el + '"]') !== null) { 
     document.querySelector('a[href="' + el + '"]').classList.add('visited'); 
    } 
    }); 

} 

// run it! 
refreshVisits(getVisitedLinks()); 

// reset visits button 
document.querySelector('button').addEventListener('click', function() { 
    localStorage.setItem('visitedLinks', JSON.stringify([])); 
    refreshVisits(getVisitedLinks()); 
}); 

をまた訪れたリンクにスタイルのビットを追加します：

今、この小さなスクリプトはlocalStorageで動作します

a.visited { 
    position: relative; 
    color: #ccc; 
    text-decoration: line-through; 
    padding-left: 15px; 
} 
a.visited:before { 
    content: "\2713 "; 
    position: absolute; 
    left: 0; 
    top: -2px; 
} 

今デモもCodePenで見つけることができます。私はjQueryを使うときれいになると思うが、we don't need jQuery!