如何保存对本地存储所做的任何更改?
An answer到this question可以将特定对象的切换类保存到本地存储,这很有帮助,但不完全是我所需要的。当没有很多解释性评论时,我并不擅长修改代码。如何保存对本地存储所做的任何更改?
这是回答者的JS:
if (typeof(localStorage) == 'undefined') {
document.getElementById("result").innerHTML =
'Your browser does not support HTML5 localStorage. Try upgrading.';
} else {
$(".item").each(function(i, el) {
if (localStorage['fav' + i] == 'favorites') {
$(this).addClass('favorites');
}
});
}
$(document).ready(function() {
$('.btn').on('click', function() {
var $item = $(this).closest('.item');
var index = $('.item').index($item);
//$(".item").removeClass('favorites');
//localStorage.removeItem('background');
$item.toggleClass('favorites');
if ($item.hasClass('favorites')) {
console.log(index)
localStorage.setItem('fav' + index, 'favorites');
} else {
localStorage.removeItem('fav' + index);
}
});
});
但我希望有一种方法可以有一个按钮,以保存已对网页进行任何更改。我正在制作一个非常具有互动性的页面,并且具有可以理解的元素,可扩展菜单和高亮段落。我希望有一个保存按钮可保存编辑后的文本,哪些菜单处于打开状态,哪些段落将突出显示。
有没有办法做到这一点,而不必编辑每个互动元素的jQuery?
听起来像你只是想一种方法来保存整个页面状态到本地存储。
如果我打算这样做,我可能会为每个需要状态的元素创建一个不同的本地存储项目,以便将事物组织得非常清晰。
所以,你需要一种方法来你的状态转换到本地存储字符串后
解析它放回把状态保持在这样一个对象的状态可以工作
state = {
'menu1': 'open',
'menu2': 'closed',
'textinput1': {'text': '' /*put text here*/, 'highlighted': '57-159'} //characters 57-159 are highlighted
}
//or if you want things to be as simple as possible
state = {
'menu1': 'open',
'menu2': 'closed',
'textinput1-text': '' /*put text here*/,
'textinput1-highlighted: '57-159'}
}
//and then reading through the state
for (item in state) {
if (state.hasOwnProperty(item)) {
//convert the state into a single string for each item
//then set the local storage item
localStorage.setItem(item,stringstate)
}
}
只是要小心但如果你用'textinput1'(它实际上拥有它自己的一个对象)做了我上面所做的。你可能会想给每个这些内部项目的这样自己的本地存储物品:
'textarea1-text' and 'textarea1-highlighted'
如果你不喜欢这个单一的工作状态已经可能难以返工你的代码要做到这一点,但它会更容易对新事物,如果你持有所有这些事情
或者,如果你在你的网页多个组件,你可以有一个状态为每个组件
转换本地存储到本地存储项目返回状态:
for (item in state) {
if (state.hasOwnProperty(item){
state.item = localStorage.getItem(item)
}
然后,无论何时您想将状态保存到本地存储,都很容易,因为您已拥有所有状态 您可以在任何时候对网页上的任何内容进行任何更改,或者状态只有当用户试图保存它时,你可以立即全部更新所有按钮被点击后立即全部更新,然后立即保存到本地存储
我希望这有助于一些,对不起,如果这不是你正在寻找的方法
编辑:
对不起,这个想法的状态非常混乱,我可能在解释我的意思方面做得很差。因此,您希望有一个按钮保存通过将其保存到本地存储器所做的任何更改。你从另一个人的答案中得到的切换想法可以用于诸如菜单打开或关闭之类的事情,因为它只能处于“开”或“关”的位置,但是如果你想保存文本和文本是突出显示,那么你当然需要保存更多的信息。
你说你有所有这些元素,如菜单和文本元素。你可以有一个单一的对象(无论你想要什么名称)。现在我们称之为状态。
所以
var state = {}
对象是一个单一的地方,你可以将所有不同状态的各种元素。如果菜单很容易打开或关闭,您可以拥有一个状态。
如果打开菜单的jQuery事件打开(或者您有该事件触发),则关闭,只需让它保存发生在状态对象上的任何事件即可。 下面是一个粗略的例子来展示这个概念。假设您有一些类似菜单的菜单,并使用jquery show()
和hide()
函数将其切换为打开和关闭。
var state = {
menu1: false
}
//A function you call whenever the menu button is clicked
function menuToggle() {
if (state.menu1) {
$('#menu1').hide()
} else {
$('#menu1').show()
}
//now update the state change
state.menu1 = !state.menu1
}
现在让我们假设你有一些函数被调用时,你想要将更改保存到本地存储
saveToLocalStorage() {
for (item in state) {
if (state.hasOwnProperty(item)) {
//make sure only to save the state[item] if it is a string or can doesn't lose meaning if converted to a string
localStorage.setItem(item, state[item])
}
}
}
该代码将通过国家每个项目运行,并将其保存到本地存储
在加载页面,您可以查看本地存储
loadFromLocalStorage() {
var storedItem
//loop through all of the properties in state
for (item in state) {
if (state.hasOwnProperty(item)) {
storedItem = localStorage.getItem(item)
if (storedItem !== null) {
//the state now holds whatever was in local storage
state[item] = storedItem
}
}
}
}
Sorr如果我没有将事情简单化,那么再一次。你问的问题要求你有一些方法来检查你想保存到本地存储的所有东西,所以如果你把所有这些信息都放在一个对象中,那么很容易把它全部保存,因为它已经在一个地方。
谢谢你的回答!不幸的是,我并不真正了解如何将其纳入我的代码。就像你说的那样,我不是在用'单一国家'。我对jQuery很陌生,几乎完全不了解JS,所以即使阅读了这3次,我仍然没有得到它。如果我通过一个快速的在线课程,这是一个基本的JS理论吗?或者这是更具体的东西?也许你可以指向我的演示某处写这样的代码吗? – Cleo
对不起,这是如此令人困惑,我可以理解它会是怎样,当我知道它的时候,它是为了我。它实际上是JavaScript库[react](https://facebook.github.io/react/)中使用的东西,这是我第一次了解到一个国家的想法。但是,即使只是简单的JS,编写代码也是一种有用的方法。我会试着再补充一点,以解释我在答案底部的含义 – Dal
我在帮助完成该正则表达式问题后点击了您的个人资料,并认为我也可以帮助您解决这个问题。如果没有真正看到网页的外观和修改方式,很难回答这个问题。是否有一个特别的原因,您没有使用像REST API这样的服务器端服务来将数据保存到数据库?是否需要本地存储? –
嗯,最重要的是我正在为一个最终将链接到服务器的网站(专业服务将为我做,我不知道任何服务器端代码)的原型。为了演示的目的,我希望我可以有一个按钮,可以让我向人们展示“保存你的位置”功能是如何工作的。如果太困难了,我可能只需要等到我可以在服务器端完成它。 – Cleo
@Cleo通过任何更改,你的意思是你的JS变量?或者是其他东西?因为如果是JS变量,解决方案很容易做到并理解... –