为每个 page/url 设置并获取添加的 html 元素的 cookie 数组

Question

我有一个书签功能，可以将插入符号（元素）附加到进度条（元素）。插入符号相对于进度条的宽度绝对定位。用户可以添加多个书签。结果 HTML;

<div class="progress-bar" style="width: 50%;">
    <div class="caret" style=" left:50%;"></div>
    <div class="caret" style=" left:60%;"></div>
</div>

我想做的是将这些书签保存在 cookie 中，这样当用户重新访问该页面时书签就位。

我使用此解决方案进行了基本设置 how to store an array in jquery cookie?

但我不知道如何存储和显示一组已保存的书签元素以及如何为每个页面执行此操作/url 保存书签的位置。

Fiddle https://jsfiddle.net/jabuka/spevhqxv/

谢谢。

Answer 1

将您创建的每个元素添加到数组中，然后将其转换为 JSON 对象并将其存储在本地存储中，如下所示：

var json = JSON.stringify(elems);
localStorage.setItem('bookmarks', json);

当用户重新访问页面时，您可以再次加载 JSON 页面并添加元素：

elems = JSON.parse(localStorage.getItem('bookmarks'));
for(var i in elems){
 $('.progress-bar').append(elems[i]);
}

这是一个有效的JSFiddle

为每个 page/url 设置并获取添加的 html 元素的 cookie 数组

Set and get cookie array of added html elements for each page/url

html

javascript

cookies

jquery

jsfiddle