点击次数 html,将点击次数存储到localstorage html5(Storing clicks count to localstorage html5)...

将点击次数存储到localstorage html5(Storing clicks count to localstorage html5)

我希望存储该点击次数，以便当用户离开页面时(关闭它)我可以从localstorage中回忆起这个数字。

Made a http://jsfiddle.net/ddvQU/30/ jsfiddle that counts the clicks in a div area.

I am looking to store that number of clicks so when the user navigates away from the page (Closes it) I can recall the number from localstorage.

原文：https://stackoverflow.com/questions/22171893

更新时间：2020-11-30 16:11

最满意答案

我已经更新了你的jsfiddle ，它可以做你想要的：

$( function() {

var clickCount = localStorage.getItem('clickCount');

clickCount = clickCount ? parseInt(clickCount) : 0;

var $num = $('.num');

$num.text(clickCount);

$('.box').click( function() {

$num.text(++clickCount);

localStorage.setItem('clickCount', clickCount);

});

});

我没有使用try ... catch块，但在现实生活中你应该，因为你可能会在尝试访问localStorage时遇到错误，因为它可以被禁用或者你可能已经消耗了你的磁盘配额。

I've updated your jsfiddle and it does what you want:

$( function() {

var clickCount = localStorage.getItem('clickCount');

clickCount = clickCount ? parseInt(clickCount) : 0;

var $num = $('.num');

$num.text(clickCount);

$('.box').click( function() {

$num.text(++clickCount);

localStorage.setItem('clickCount', clickCount);

});

});

I haven't used try ... catch blocks, but in real life you should, as you could get errors trying to access localStorage, because it can be disabled or you could have consumed your disk quota.

相关问答

localStorage用于key : value对，所以你可能想要做的是JSON.stringify化数组并将该字符串存储在mycars键中，然后可以将其退出并JSON.parse 。 例如， var mycars = new Array();

mycars[0] = "Saab";

mycars[1] = "Volvo";

mycars[2] = "BMW";

localStorage["mycars"] = JSON.stringify(mycars);

var cars = JSON.

...

馊主意。 访问机器的人总是能够读取本地存储器，没有什么可以做的，以防止它。 只需在firebug控制台中键入“localStorage”，就可以很好地列出所有的键/值对。 如果您的应用程序中存在XSS漏洞，那么存储在localStorage任何内容都可用于攻击者。 你可以尝试加密它，但是有一个catch。 在客户端上加密它是可能的，但这意味着用户必须提供密码， 并且必须依赖于经过验证的未经验证的加密技术的JavaScript实现。 当然可以在服务器端进行加密，但客户端代码无法读取或更新它，因此您将

...

从规格报价： getItem(key)方法必须返回与给定键相关联的当前值。 如果与该对象相关联的列表中不存在给定的键，则此方法必须返回null。 你应该实际检查null 。 if (localStorage.getItem("username") === null) {

//...

}

Quoting from the specification: The getItem(key) method must return the current value associated with th

...

看看苹果 ， Mozilla和Microsoft文档，功能似乎只限于处理字符串键/值对。 解决方法可以在存储之前对您的对象进行字符串处理 ，然后在检索到该对象时解析它： var testObject = { 'one': 1, 'two': 2, 'three': 3 };

// Put the object into storage

localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the

...

正如其名称所示，本地存储在本地存储信息，这意味着在浏览器中，在客户端。 servlet过滤器在服务器端执行。 无法访问服务器端的本地存储。 如果您需要从servlet过滤器访问存储在本地存储中的某个ID，则从JavaSCript中的本地存储中检索此ID，并将包含此ID的请求发送到服务器。 The local storage, as its name indicates, stores information locally, which means in the browser, at clien

...

您不应该听特定表单元素的点击事件，而应该听取表单的提交事件。 提交表格时，您可以掌握手头所有字段的信息，并且用户填写表格字段的顺序无关紧要。 $('#my-form').on('submit', function() {

/* place your logic here… */

});

You shouldn't listen to the click events of specific form elements but rather to the submit event of t

...

您只需将其设置为一个变量，而不是在本地存储中进行更新。 同样在addToBasket函数中，您需要检查本地存储的数量并增加它，然后将新数量设置为本地存储。 localStorage.setItem("basketData", JSON.stringify({

basketQty: 1,

products: []

}));

你可以参考这个例子。 我为此创建了一个原始解决方法，您可以更好地了解它 https://jsfiddle.net/3tdn2jrv/ You are just

...

闭包库在Javascript中有一组编码算法，也许其中一个可以提供帮助： http : //code.google.com/p/closure-library/source/browse/#svn%2Ftrunk%2Fclosure%2Fgoog%2Fcrypt The closure library has a set of encoding algorithms in Javascript, maybe one of those can help: http://code.google.com

...

我已经更新了你的jsfiddle ，它可以做你想要的： $( function() {

var clickCount = localStorage.getItem('clickCount');

clickCount = clickCount ? parseInt(clickCount) : 0;

var $num = $('.num');

$num.text(clickCount);

$('.box').click( function() {

...

如果存储的项目变为字符串，您可以在localStorage中存储您喜欢的任何内容，在您的情况下没有问题，并且每个站点的总存储量不超过5Mb。 你的方法可能是这样的。 当页面加载(使用jQuery)时，检查基本HTML模板是否存在 如果不使用jQuery加载它并将其存储在localStorage中 使用jQuery选择器在当前页面中选择适当的元素。 这可能是元素。 并使用$(...)。html(存储的html模板); 显示基本html。 如果需要插入动态值，请使用John Resig MicroTe

...