Question

我有一些JavaScript代码，该代码提供了来自预选链接的随机链接。它存储您访问过的链接，但不为您提供您已经访问过的链接。访问所有链接后，它将删除其访问的站点数据。

// Store javascript object to localStorage
Storage.prototype.setObject = function(key, value) {
    this.setItem(key, JSON.stringify(value));
}

// Get javascript object from localStorage
Storage.prototype.getObject = function(key) {
    return JSON.parse(this.getItem(key));
}

// Your URLs with default visited values
var urls = [
    { name: "somesite1", url: "http://somesite1.com", visited: false },
    { name: "somesite2", url: "http://somesite2.com", visited: false },
    { name: "somesite3", url: "http://somesite3.com", visited: false },
    { name: "somesite4", url: "http://somesite4.com", visited: false }
];

// If there's no urls object in localStorage, call setDefault method
if (!localStorage.getObject("urls")) {setDefault();}

// Check all link objects. If all are visited, return true, else return false
function checkVisited() {
    var counter = 0;
    var getUrls = localStorage.getObject("urls");
    for (var i = 0; i < getUrls.length; i++) {
        if (getUrls[i].visited) {counter++;}
    }
    return counter === getUrls.length;
}

// Set defaults values to localStorage
function setDefault() {
    localStorage.setObject("urls", urls);
}

// If all links are visited, set default values
// Then get random links until you find one
// that's not visited. When it's found, set it
// to visited in localStorage and redirect to it 
function goSomewhere() {
    if (checkVisited()) {setDefault();}
    var getUrls = localStorage.getObject("urls");
    var visited = true;
    while(visited) {
        var e = Math.floor(Math.random()*getUrls.length);
        if (!getUrls[e].visited) {
            visited = false;
            getUrls[e].visited = true;
            localStorage.setObject("urls", getUrls);
            window.location = getUrls[e].url;
        }
    }
}

<input class="start" type="button" onClick="goSomewhere(); return ;" alt="Submit" width="800" height="100"value="»» Bring Links ««"

我想做的是在我的html中添加一个复选框，如果选中，则将使用我要创建的另一个预选链接集。否则它将使用相同的链接。

Answer 1

我花了太长时间。它不会在这里运行，因为StackOverflow会阻止localStorage访问，但是您可以在此处看到示例：https://lab-etdiboscot.now.sh

源代码可以在这里查看：

它仅存储一个整数，并使用bitwise标志来确定已看到哪些链接，并使用一个数组过滤器除去标准或备用链接，并使用另一个过滤器除去查看的链接。然后，它从过滤的列表中选择一个链接，显示它并更新存储的标志。

function displayLink() {
  const checked = document.querySelector('#alternate-links').checked;
  const linkEl = document.querySelector('#display-link');
  let links = [
    { id: 1, name: 'somesite1', type: 'std', url: 'http://somesite1.com' },
    { id: 2, name: 'somesite2', type: 'std', url: 'http://somesite2.com' },
    { id: 4, name: 'somesite3', type: 'std', url: 'http://somesite3.com' },
    { id: 8, name: 'somesite4', type: 'std', url: 'http://somesite4.com' },
    { id: 16, name: 'altsite1', type: 'alt', url: 'http://altsite1.com' },
    { id: 32, name: 'altsite2', type: 'alt', url: 'http://altsite2.com' },
    { id: 64, name: 'altsite3', type: 'alt', url: 'http://altsite3.com' },
    { id: 128, name: 'altsite4', type: 'alt', url: 'http://altsite4.com' }
  ];
  const storage = localStorage.getItem('visited');
  let flags = storage ? parseInt(storage) : 0;
  if ((flags & 15) === 15) // if the first 4 are all visited...
    flags -= 15;           // ...zero out the first 4 flags
  if ((flags & 240) === 240) // if the last 4 are all visited...
    flags -= 240;            // zero out the lat 4 flags

  // filter out the checked or unchecked and the visited links
  links = links.filter(link => checked ? link.type === 'alt' : link.type === 'std').filter(link => !(flags & link.id));

  // pick one
  const idx = Math.floor(Math.random() * links.length);
  const link = links[idx];

  localStorage.setItem('visited', (flags | link.id).toString()); // write the new flags out

  // update the link on the page
  linkEl.innerHTML = link.name;
  linkEl.href = link.url;
}

<button onclick="displayLink()">Display Link</button>
<input type="checkbox" id="alternate-links"> Show Alternate Links
<a id="display-link" href=""></a>

复选框JavaScript函数

1 个答案: