使用本地存储在Chrome Web App

时间:2018-02-24 21:30:02

标签: javascript html

我正在为一家本地玻璃公司构建Chrome网上应用店应用程序,目的是从各种社交帐户及其网站中获取服务的潜在客户,我正在为其构建JavaScript,目前正在通过点击的链接收集ID (无论是Facebook,Twitter,网站等)并且已成功将其添加到本地存储中。我希望能够记录函数saveBookmarks()所执行的ID(Facebook,Twitter等),如果它们继续并进行查询,则能够确定查询的来源。这是因为我只是通过应用程序中的任何链接获得的任何成功销售获得佣金。所以我需要一种能够传递id信息的方法,如果他们通过他们进行的各种帐户进行查询,保持持久性。所有链接都有单独的ID,并带有“ChromeApp”键。所以它目前正在工作,但是记录并添加了对同一链接的额外点击,因此我需要一种方法来识别是否已经添加了id值。同样如上所述,如果用户通过他们的任何帐户进行查询,我想要一种传递ID的方法,例如,他们的网站使用电子邮件表格,其他人都是社交媒体帐户,所以他们知道来自Chrome应用程序。 (要删除YouTube并替换其他内容)我还运行了2个测试函数,一个控制台在添加时记录所有条目,另一个删除其中的id(fetchBookmarks(),deleteBookmark())但仍然如果它已经存在,需要找到一种不添加id的方法。 deleteBookmark()函数不起作用,因为saveBookmarks()只是不断添加id项。到目前为止我所得到的是下面的内容。

HTML代码

<div class="modal-icons">
    <div class="flex-container">
        <div class="flex" id="Website" onclick="saveBookmark(this.id)">
            <a href="http://allweatherroofline.com" target="_blank">
            </a>
            <i class="fa fa-globe"></i>
        </div>
        <div class="flex" id="YouTube" onclick="saveBookmark(this.id)">
            <a href="#" target="_blank">
            </a>
            <i class="fa fa-youtube"></i>
        </div>
        <div class="flex" id="Facebook" onclick="saveBookmark(this.id)">
            <a href="#" target="_blank">
            </a>
            <i class="fa fa-facebook"></i>
        </div>
        <div class="flex" id="Twitter" onclick="saveBookmark(this.id)">
            <a href="#" target="_blank">
            </a>
            <i class="fa fa-twitter"></i>
        </div>
        <div class="flex" id="Linkedin" onclick="saveBookmark(this.id)">
            <a href="#" target="_blank">
            </a>
            <i class="fa fa-linkedin"></i>
        </div>
    </div>
</div>

的Javascript

    function saveBookmark(id) {
     if(localStorage.getItem('ChromeApp') === null){
    // Init array
    var linkVisit = []
    // Add to array
    linkVisit.push(id);
    // Set to localStorage
    localStorage.setItem('ChromeApp', JSON.stringify(linkVisit));
  } else {
    // Get bookmarks from localStorage
    var linkVisit = JSON.parse(localStorage.getItem('ChromeApp'));
    // Add bookmark to array
    linkVisit.push(id);
    // Re-set back to localStorage
    localStorage.setItem('ChromeApp', JSON.stringify(linkVisit));
  }
fetchBookmarks();
deleteBookmark();
}
// Fetch bookmarks to test additions
function fetchBookmarks(){
  // Get bookmarks from localStorage
var linkVisit = JSON.parse(localStorage.getItem('ChromeApp'));
console.log(linkVisit);
} 
   //Try to delete ids which are already been clicked. Doesnt work!
    function deleteBookmark(id){
  // Get bookmarks from localStorage
  var linkVisit = JSON.parse(localStorage.getItem('ChromeApp'));
  // Loop through the bookmarks
  for(var i =0;i < linkVisit.length;i++){
    if(linkVisit[i].id == id){
      // Remove from array
      linkVisit.splice(i, 1);
    }
}
}

“Twitter”的id“Facebook”或其他任何设置都是必需的,但是他们可以在同一次访问中对不同的SM帐户进行多次查询,并且需要记录所有访问

欢迎任何提示,谢谢。

1 个答案:

答案 0 :(得分:0)

您可以在阵列上使用.contains()

function saveBookmark(id) {
     if(localStorage.getItem('ChromeApp') === null){
    // Init array
    var linkVisit = []
    // Add to array
    linkVisit.push(id);
    // Set to localStorage
    localStorage.setItem('ChromeApp', JSON.stringify(linkVisit));
  } else {
    // Get bookmarks from localStorage
    var linkVisit = JSON.parse(localStorage.getItem('ChromeApp'));
    // Add bookmark to array
    //If id is already in there, don't do anything.
    if(!linkVisit.contains(id)){
      linkVisit.push(id);
      // Re-set back to localStorage
      localStorage.setItem('ChromeApp', JSON.stringify(linkVisit));
    }
  }

尽管如此,我建议您重新编写整个代码并使用对象。另外,让你的代码更有效率,就像这样;

//Get the local storage item, if null, set empty object
var linkVisit = localStorage.getItem('ChromeApp') === null ? {} : JSON.parse(localStorage.getItem('ChromeApp'));

  //Function to avoid repeated code, saves management time.
  function updateLocalStorage(){
    localStorage.setItem('ChromeApp', JSON.stringify(linkVisit));
  }

  function saveBookmark(id) {
    //Check if ID was already in the localstorage
    //If not, add it.
    if(!linkVisit.hasOwnProperty(id)){
      linkVisit[id] = id;
    }
    //Update the local storage
    updateLocalStorage();
  }

  //This function is kind of redundant now.
  function fetchBookmark(){
    console.log(linkVisit);
  }

  function deleteBookmark(id){
    //Delete the object property
    delete linkVisit[id];
    //Update local storage again
    updateLocalStorage();
  }