[英]HTML5 local storage save .toggleClass
How Can I save the toggled class into HTML 5 local storage?如何将切换的类保存到 HTML 5 本地存储中?
This is my simple toggle function:这是我的简单切换功能:
/* Toggle */
$('.bar-toggle').on('click',function(){
$('.container').toggleClass('with_toggle');
});
I don't really understand how to use the local storage and all the examples I came across use the .hide and .show and cannot find anything related to toggleClass我不太明白如何使用本地存储,我遇到的所有示例都使用 .hide 和 .show 并且找不到与 toggleClass 相关的任何内容
I wouldn't want to use the .show and .hide as they are costly for the browser but just take advantage of my toggle class...我不想使用 .show 和 .hide 因为它们对浏览器来说很昂贵,但只需利用我的切换类......
fiddle: fiddle example小提琴:小提琴示例
codepen: http://codepen.io/anon/pen/oLvNgB代码笔: http ://codepen.io/anon/pen/oLvNgB
<a href="javascript:void(0)" class="bar-toggle">toggle and save state</a>
<div id="container">
</div>
#container {
background-color: #ededed;
height: 200px;
width: 200px;
}
.with_toggle {
background-color: #aeaeae !important;
}
//retrieve current state
$('#container').toggleClass(window.localStorage.toggled);
/* Toggle */
$('.bar-toggle').on('click',function(){
if (window.localStorage.toggled != "with_toggle" ) {
$('#container').toggleClass("with_toggle", true );
window.localStorage.toggled = "with_toggle";
} else {
$('#container').toggleClass("with_toggle", false );
window.localStorage.toggled = "";
}
});
http://jsbin.com/wimojapowo/1/edit?html,css,js,output http://jsbin.com/wimojapowo/1/edit?html,css,js,output
https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
U can use method " $(element).hasClass( string class ) "你可以使用方法“ $(element).hasClass(string class) ”
Example:示例:
$('.bar-toggle').on('click',function(){
if ($('.container').hasClass('.with_toggle')) {
// mark as false 'cos in the next step u remove class .with_toggle
localStorage.setItem("container_with_toggle", 0);
} else {
// mark as true 'cos in the next step u add class .with_toggle
localStorage.setItem("container_with_toggle", 1);
}
$('.container').toggleClass('with_toggle');
});
When u access to localStorage:当您访问 localStorage 时:
var container_with_toggle = localStorage.getItem('container_with_toggle'); // return string zero or one ("0" or "1")
//So, u can use ternary
container_with_toggle = (container_with_toggle === "1") ? true : false;
And, if you set value like boolean localStorage.setItem("container_with_toggle", true)
, u can use ternary operator or JSON.parse
.而且,如果你设置像 boolean
localStorage.setItem("container_with_toggle", true)
这样的值,你可以使用三元运算符或JSON.parse
。
var container_with_toggle = localStorage.getItem('container_with_toggle'); // return string with boolean notation ("false" or "true")
//Ternary
container_with_toggle = (container_with_toggle === "true") ? true : false;
// Or use JSON.parse
container_with_toggle = JSON.parse(container_with_toggle ); // return boolean true or false
Remember, in some browser u need use window.localStorage
.请记住,在某些浏览器中,您需要使用
window.localStorage
。
Bye!再见!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.