- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我研究了一些有关 localStorage 和 javascript cookie 的网站,并尝试应用它,但没有成功,它总是不起作用。我想在我的作业中应用 localStorage 或 javascript cookie。一个简单的预订主题。我希望浏览器记住我在浏览器中所做的更改。
Javascript:
<script type="text/javascript">
var availableSlot1 = 5;
var reduceSlot1 = function(valueToDeduct1){
availableSlot1 = availableSlot1 - valueToDeduct1;
document.getElementById('ite164').innerHTML = availableSlot1;
if (availableSlot1 == 0){
document.getElementById('ite164').innerHTML = "FULL";
document.getElementById("ite164").style.color = "red";
document.getElementById("number1").style.color = "red";
document.getElementById("subject1").style.color = "red";
document.getElementById("code1").style.color = "red";
document.getElementById("units1").style.color = "red";
document.getElementById("prof1").style.color = "red";
document.getElementById("1").style.display = "none";
}
};
var availableSlot2 = 5;
var reduceSlot2 = function(valueToDeduct2){
availableSlot2 = availableSlot2 - valueToDeduct2;
document.getElementById('phi001').innerHTML = availableSlot2;
if (availableSlot2 == 0){
document.getElementById('phi001').innerHTML = "FULL";
document.getElementById("phi001").style.color = "red";
document.getElementById("number2").style.color = "red";
document.getElementById("subject2").style.color = "red";
document.getElementById("code2").style.color = "red";
document.getElementById("units2").style.color = "red";
document.getElementById("prof2").style.color = "red";
document.getElementById("2").style.display = "none";
}
};
var availableSlot3 = 5;
var reduceSlot3 = function(valueToDeduct3){
availableSlot3 = availableSlot3 - valueToDeduct3;
document.getElementById('ite165').innerHTML = availableSlot3;
if (availableSlot3 == 0){
document.getElementById('ite165').innerHTML = "FULL";
document.getElementById("ite165").style.color = "red";
document.getElementById("number3").style.color = "red";
document.getElementById("subject3").style.color = "red";
document.getElementById("code3").style.color = "red";
document.getElementById("units3").style.color = "red";
document.getElementById("prof3").style.color = "red";
document.getElementById("3").style.display = "none";
}
};
var availableSlot4 = 5;
var reduceSlot4 = function(valueToDeduct4){
availableSlot4 = availableSlot4 - valueToDeduct4;
document.getElementById('ite048').innerHTML = availableSlot4;
if (availableSlot4 == 0){
document.getElementById('ite048').innerHTML = "FULL";
document.getElementById("ite048").style.color = "red";
document.getElementById("number4").style.color = "red";
document.getElementById("subject4").style.color = "red";
document.getElementById("code4").style.color = "red";
document.getElementById("units4").style.color = "red";
document.getElementById("prof4").style.color = "red";
document.getElementById("4").style.display = "none";
}
};
var availableSlot5 = 5;
var reduceSlot5 = function(valueToDeduct5){
availableSlot5 = availableSlot5 - valueToDeduct5;
document.getElementById('ite136').innerHTML = availableSlot5;
if (availableSlot5 == 0){
document.getElementById('ite136').innerHTML = "FULL";
document.getElementById("ite136").style.color = "red";
document.getElementById("number5").style.color = "red";
document.getElementById("subject5").style.color = "red";
document.getElementById("code5").style.color = "red";
document.getElementById("units5").style.color = "red";
document.getElementById("prof5").style.color = "red";
document.getElementById("5").style.display = "none";
}
};
Jquery:
<script>
$(document).ready(function(){
$("#button1").hide();
$("#button2").hide();
$("#button3").hide();
$("#button4").hide();
$("#button5").hide();
$("#button6").hide();
$("#button7").hide();
$("#1").click(function(){
$("#button1").show();
$("#button1").fadeIn(1000);
$("#button2").hide();
$("#button3").hide();
$("#button4").hide();
$("#button5").hide();
$("#button6").hide();
$("#button7").hide();
$("#button1").click(function() {
$("#button1").hide();
});
});
$("#2").click(function(){
$("#button1").hide();
$("#button2").show();
$("#button2").fadeIn(1000);
$("#button3").hide();
$("#button4").hide();
$("#button5").hide();
$("#button6").hide();
$("#button7").hide();
$("#button2").click(function() {
$("#button2").hide();
});
});
$("#3").click(function(){
$("#button1").hide();
$("#button2").hide();
$("#button3").show();
$("#button3").fadeIn(1000);
$("#button4").hide();
$("#button5").hide();
$("#button6").hide();
$("#button7").hide();
$("#button3").click(function() {
$("#button3").hide();
});
});
$("#4").click(function(){
$("#button1").hide();
$("#button2").hide();
$("#button3").hide();
$("#button4").show();
$("#button4").fadeIn(1000);
$("#button5").hide();
$("#button6").hide();
$("#button7").hide();
$("#button4").click(function() {
$("#button4").hide();
});
});
$("#5").click(function(){
$("#button1").hide();
$("#button2").hide();
$("#button3").hide();
$("#button4").hide();
$("#button5").show();
$("#button5").fadeIn(1000);
$("#button6").hide();
$("#button7").hide();
$("#button5").click(function() {
$("#button5").hide();
});
});
$("#6").click(function(){
$("#button1").hide();
$("#button2").hide();
$("#button3").hide();
$("#button4").hide();
$("#button5").hide();
$("#button6").show();
$("#button6").fadeIn(1000);
$("#button7").hide();
$("#button6").click(function() {
$("#button6").hide();
});
});
$("#7").click(function(){
$("#button1").hide();
$("#button2").hide();
$("#button3").hide();
$("#button4").hide();
$("#button5").hide();
$("#button6").hide();
$("#button7").show();
$("#button7").fadeIn(1000);
$("#button7").click(function() {
$("#button7").hide();
});
});
});
</script>
HTML:
<table border="1" width="700px">
<tr>
<th>#</th>
<th>Subjects</th>
<th>Subject Code</th>
<th>Units</th>
<th>Instructor</th>
<th>Available Slots</th>
</tr>
<tr>
<td class="center" id="number1">1</td>
<td id="subject1">Data Comm. Systems & Networking</td>
<td class="center" id="code1">ITE164</td>
<td class="center" id="units1">3.0</td>
<td id="prof1">Quinito, Floreto Jr. R.</td>
<td style="text-align: center;"><span id="ite164">5</span></td>
</tr>
<tr>
<td class="center" id="number2">2</td>
<td id="subject2">Introduction to Philosophy and Logic</td>
<td class="center" id="code2">PHI001</td>
<td class="center" id="units2">3.0</td>
<td id="prof2">Chiong, Isidro R.</td>
<td style="text-align: center;"><span id="phi001">5</span></td>
</tr>
<tr>
<td class="center" id="number3">3</td>
<td id="subject3">Basic Finance & Acctg. Principles for IT</td>
<td class="center" id="code3">ITE165</td>
<td class="center" id="units3">3.0</td>
<td id="prof3">Cadelinia, Godofredo B.</td>
<td style="text-align: center;"><span id="ite165">5</span></td>
</tr>
<tr>
<td class="center" id="number4">4</td>
<td id="subject4">Discrete Structures</td>
<td class="center" id="code4">ITE048</td>
<td class="center" id="units4">3.0</td>
<td id="prof4">Calibara, Eunelfa Regie F.</td>
<td style="text-align: center;"><span id="ite048">5</span></td>
</tr>
<tr>
<td class="center" id="number5">5</td>
<td id="subject5">Web Page Design</td>
<td class="center" id="code5">ITE136</td>
<td class="center" id="units5">3.0</td>
<td id="prof5">Pequiro, Chemby Mae S.</td>
<td style="text-align: center;"><span id="ite136">5</span></td>
</tr>
<tr>
<td class="center" id="number6">6</td>
<td id="subject6">Systems Analysis and Design</td>
<td class="center" id="code6">ITE062</td>
<td class="center" id="units6">3.0</td>
<td id="prof6">Galudo, Darwin M.</td>
<td style="text-align: center;"><span id="ite062">5</span></td>
</tr>
<tr>
<td class="center" id="number7">7</td>
<td id="subject7">Operating System</td>
<td class="center" id="code7">ITE076</td>
<td class="center" id="units7">3.0</td>
<td id="prof7">Lagala, Glenn T.</td>
<td style="text-align: center;"><span id="ite076">5</span></td>
</tr>
</table>
<div id="combobox">
<span style="color: white;">Select a subject to reserve:</span>
<select>
<option id="1" value="ITE164">Data Comm. Systems & Networking (ITE164)</option>
<option id="2" value="PHI001">Introduction to Philosophy and Logic (PHI001)</option>
<option id="3" value="ITE165">Basic Finance & Acctg. Principles for IT (ITE165)</option>
<option id="4" value="ITE048">Discrete Structures (ITE048)</option>
<option id="5" value="ITE136">Web Page Design (ITE136)</option>
<option id="6" value="ITE062">Systems Analysis and Design (ITE062)</option>
<option id="7" value="ITE076">Operating System (ITE076)</option>
</select>
<a href="javascript:reduceSlot1(1)" id="button1"><input type="button" value="Reserve"></a>
<a href="javascript:reduceSlot2(1)" id="button2"><input type="button" value="Reserve"></a>
<a href="javascript:reduceSlot3(1)" id="button3"><input type="button" value="Reserve"></a>
<a href="javascript:reduceSlot4(1)" id="button4"><input type="button" value="Reserve"></a>
<a href="javascript:reduceSlot5(1)" id="button5"><input type="button" value="Reserve"></a>
<a href="javascript:reduceSlot6(1)" id="button6"><input type="button" value="Reserve"></a>
<a href="javascript:reduceSlot7(1)" id="button7"><input type="button" value="Reserve"></a>
</div>
很抱歉代码非常困惑,我还是个新手。你能帮我吗?
最佳答案
本地存储将比 cookie 更好地满足您的需求。基本上,窗口上有一个名为 localStorage
的类似数组的对象。您只能使用它来存储任意字符串。喜欢:
window.localStorage["button1_is_showing"] = true;
或者:
window.localstorage.button1_is_showing = true;
true
bool 值将转换为字符串 "true"
。一段时间后再次将其转换为 bool 值:
var b1showing;
if (window.localStorage.button1_is_showing == "true") {
b1showing = true;
}
else {
b1showing = false;
}
您还可以使用浏览器的 JSON 解析器来实现此目的:
var b1showing = JSON.parse(window.localStorage.button1_is_showing);
但请记住,它没有强大的浏览器支持:http://caniuse.com/#search=JSON
您在 localStorage 中存储的任何字符串都将保留在那里,直到浏览器清除其 cookie,或者直到您删除如下内容:
delete window.localStorage.b1showing;
对于您的特定示例:每次用户单击按钮时,请在 localStorage 中为每个按钮创建一个对象来存储按钮状态。然后,当加载页面时(在就绪事件中),循环遍历本地存储检查那里有什么,并根据情况隐藏/显示按钮。
旁注:使用类而不是 7 个不同的 id 更加灵活、可读且快速。
编辑:另一个优秀来源:http://diveintohtml5.info/storage.html
这里有更多信息:https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage
关于javascript - 如何在我的程序上应用 localStorage 或 javascript Cookie?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19205021/
我是 Angular 新手。使用 $localstorage(ngStorage) 是否有任何特定的原因而不是常规的 javascript localstorage 有什么区别。 谁能给我解释一下吗?
这个问题说明了一切。我意识到所有选项都可以在最新的浏览器中使用,但是语义上最好的选择是什么?为什么? 最佳答案 根据 W3C 标准,正确的是 window.localStorage,因为 localS
我想不出一个好的标题,所以希望可以。 我正在做的是创建一个离线 HTML5 webapp。 “出于某些原因”我不希望将某些文件放在缓存 list 中,而是希望将内容放在 localStorage 中。
我最近问了a question about LocalStorage .使用 JSON.parse(localStorage.item) 和 JSON.parse(localStorage['item
我最近问了a question about LocalStorage .使用 JSON.parse(localStorage.item) 和 JSON.parse(localStorage['item
我最近问过a question about LocalStorage 。使用 JSON.parse(localStorage.item) 和 JSON.parse(localStorage['item
我在将本地存储的定价添加到其他字段时遇到问题。如果我将 beforeNoonNPSlot 的价格设置为 2,但我将 matineeNPSlot 的字段留空(它应该保留分配给的任何价格)最后)。然后在我
我需要从 localStorage 对象变量中删除对象键而不从 localStorage 中删除键 let obj = localStorage; let keys = Object.keys(loc
根据我所读到的内容,我希望以下代码能够工作。 此代码是函数的一部分,该函数应该通过用下一个更高的 localStorage 变量覆盖它来删除 localStorage 变量。一旦没有更多内容可供复制,
这个问题已经有答案了: 已关闭10 年前。 Possible Duplicate: JavaScript property access: dot notation vs. brackets? 我是
编写localStorage['key'] = value或localStorage.setItem('key', value)有区别吗? 我看到了this question标记为重复,但在开发人员工
我一直在做以下事情: var store = window.localStorage; store.setItem() 但现在我看到代码是这样做的: localStorage.setItem() 两者
我在 Chrome 上遇到此错误。不知道为什么会发生。任何帮助!我正在使用 Backbone.localStorage 插件和 Backbone。我在以下行中收到错误: localStorage: B
如果我尝试以下代码: var c = new Backbone.Collection(); c.localStorage = new Backbone.LocalStorage("items");
我想使用 localStorage 存储用户输入值,然后在倒计时器中使用该值。 这是用户输入数据的 HTML: Work Time
我有一个适用于 Mac 和 Linux 用户但不适用于 Windows 用户的 Chrome 扩展程序。当我进入控制台并在 localStorage 中设置一个项目时,它工作正常,但是当用户尝试使用扩
在这里浏览所有问题/答案,但找不到解决我的问题的方法。条件('localStorage' in window)返回 true但是 localStorage 的对象本身仍然是 undefined . 设
使用下面的代码,我创建一个 localstorage 变量,如果未定义,则其键为 quote = 1。然而,当最终使用相同的引号键再次调用它时,即使使用了 Number() 函数,它也会变成 11 而
我上次检查时,以下两行返回 true: null == localStorage["foo"]; null == localStorage.getItem("foo"); 将 null 替换为 und
我正在尝试在 NextJS 静态站点上使用 localStorage,但遇到 localStorage 未定义错误。 我的错误显示组件的代码是: export default function Cat
我是一名优秀的程序员,十分优秀!