How to remember addClass events until browser shuts off

Question

I have built a website that can preview all the style options using onclick="jquery()"

Here my exact script:

<img src="images/header_type1.png" 
         onclick="jQuery('.xe-clearfix').addClass('header_type_1',200),
                  jQuery('.xe-clearfix').removeClass('header_type_2 header_type_3 header_type_4 header_type_5',200),

                  jQuery('.fixed_header .header_wrap').addClass('header_type_1',200),
                  jQuery('.fixed_header .header_wrap').removeClass('header_type_2 header_type_3 header_type_4 header_type_5',200),

                  jQuery('.gnb>ul>li').addClass('header_type_1',200),
                  jQuery('.gnb>ul>li').removeClass('header_type_2 header_type_3 header_type_4',200),

                  jQuery('#gnb .active_li').addClass('header_type_1',200),
                     jQuery('#gnb .active_li').removeClass('header_type_2 header_type_3 header_type_4 header_type_5',200),

                     jQuery('.gnb>ul>li:last-child').addClass('header_type_1',200),
                     jQuery('.gnb>ul>li:last-child').removeClass('header_type_2 header_type_3 header_type_4 header_type_5',200),

                   jQuery('.gnb>ul>li>a').addClass('header_type_1',200),
                     jQuery('.gnb>ul>li>a').removeClass('header_type_2 header_type_3 header_type_4 header_type_5',200),

                  jQuery('#gnb .active').addClass('header_type_1',200),
                     jQuery('#gnb .active').removeClass('header_type_2 header_type_3 header_type_4 header_type_5',200),

                  jQuery('.logo_text').addClass('header_type_1',200),
                     jQuery('.logo_text').removeClass('header_type_2 header_type_3 header_type_4 header_type_5',200),

                  jQuery('.gnb').addClass('header_type_1',200),
                     jQuery('.gnb').removeClass('header_type_2 header_type_3 header_type_4 header_type_5',200),

                  jQuery('.header').addClass('header_type_1',200),
                     jQuery('.header').removeClass('header_type_2 header_type_3 header_type_4 header_type_5',200),

                  jQuery('.logo-item').addClass('header_type_1',200),
                     jQuery('.logo-item').removeClass('header_type_2 header_type_3 header_type_4 header_type_5',200)">


    <img src="images/header_type2.png" 
         onclick="jQuery('.xe-clearfix').addClass('header_type_2',200),
                  jQuery('.xe-clearfix').removeClass('header_type_1 header_type_3 header_type_4 header_type_5',200),

                  jQuery('.fixed_header .header_wrap').addClass('header_type_2',200),
                   jQuery('.fixed_header .header_wrap').removeClass('header_type_1 header_type_3 header_type_4 header_type_5',200),

                  jQuery('.gnb>ul>li').addClass('header_type_2',200),
                  jQuery('.gnb>ul>li').removeClass('header_type_1 header_type_3 header_type_4 header_type_5',200),

                  jQuery('#gnb .active_li').addClass('header_type_2',200),
                     jQuery('#gnb .active_li').removeClass('header_type_1 header_type_3 header_type_4 header_type_5',200),

                     jQuery('.gnb>ul>li:last-child').addClass('header_type_2',200),
                     jQuery('.gnb>ul>li:last-child').removeClass('header_type_1 header_type_3 header_type_4 header_type_5',200),

                  jQuery('.gnb>ul>li>a').addClass('header_type_2',200),
                     jQuery('.gnb>ul>li>a').removeClass('header_type_1 header_type_3 header_type_4 header_type_5',200),

                  jQuery('#gnb .active').addClass('header_type_2',200),
                     jQuery('#gnb .active').removeClass('header_type_1 header_type_3 header_type_4 header_type_5',200),

                  jQuery('.logo_text').addClass('header_type_2',200),
                     jQuery('.logo_text').removeClass('header_type_1 header_type_3 header_type_4  header_type_5',200),

                  jQuery('.gnb').addClass('header_type_2',200),
                     jQuery('.gnb').removeClass('header_type_1 header_type3 header_type_4 header_type_5',200),

                  jQuery('.header').addClass('header_type_2',200),
                     jQuery('.header').removeClass('header_type_1 header_type_3 header_type_4 header_type_5',200),

                  jQuery('.logo-item').addClass('header_type_2',200),
                     jQuery('.logo-item').removeClass('header_type_1 header_type_3 header_type_4 header_type_5',200)
">

        <img src="images/header_type3.png" 
         onclick="

                  jQuery('.xe-clearfix').removeClass('header_type_1 header_type_2 header_type_4 header_type_5',200),
                  jQuery('.xe-clearfix').addClass('header_type_3',200),

                  jQuery('.fixed_header .header_wrap').addClass('header_type_3',200),
                  jQuery('.fixed_header .header_wrap').removeClass('header_type_1 header_type_2 header_type_4 header_type_5',200),

                  jQuery('.gnb>ul>li').addClass('header_type_3',200),
                  jQuery('.gnb>ul>li').removeClass('header_type_1 header_type_2 header_type_4 header_type_5',200),

                  jQuery('#gnb .active_li').addClass('header_type_3',200),
                     jQuery('#gnb .active_li').removeClass('header_type_1 header_type_2 header_type_4 header_type_5',200),

                     jQuery('.gnb>ul>li:last-child').addClass('header_type_3',200),
                     jQuery('.gnb>ul>li:last-child').removeClass('header_type_1 header_type_2 header_type_4 header_type_5',200),

                  jQuery('.gnb>ul>li>a').addClass('header_type_3',200),
                     jQuery('.gnb>ul>li>a').removeClass('header_type_1 header_type_2 header_type_4 header_type_5',200),

                  jQuery('#gnb .active').addClass('header_type_3',200),
                     jQuery('#gnb .active').removeClass('header_type_1 header_type_2 header_type_4 header_type_5',200),

                  jQuery('.logo_text').addClass('header_type_3',200),
                     jQuery('.logo_text').removeClass('header_type_1 header_type_2 header_type_4  header_type_5',200),

                  jQuery('.gnb').addClass('header_type_3',200),
                     jQuery('.gnb').removeClass('header_type_1 header_type_2 header_type_4 header_type_5',200),

                  jQuery('.header').addClass('header_type_3',200),
                     jQuery('.header').removeClass('header_type_1 header_type_2 header_type_4 header_type_5',200),

                  jQuery('.logo-item').addClass('header_type_3',200),
                     jQuery('.logo-item').removeClass('header_type_1 header_type_2 header_type_4 header_type_5',200)" width="100px">

    <img src="images/header_type4.png" 
         onclick="jQuery('.xe-clearfix').addClass('header_type_4',200),
                  jQuery('.xe-clearfix').removeClass('header_type_1 header_type_2 header_type_3 header_type_5',200),

                  jQuery('.fixed_header .header_wrap').addClass('header_type_4',200),
                  jQuery('.fixed_header .header_wrap').removeClass('header_type_1 header_type_2 header_type_3 header_type_5',200),


                  jQuery('.gnb>ul>li').addClass('header_type_4',200),
                  jQuery('.gnb>ul>li').removeClass('header_type_1 header_type_2 header_type_3 header_type_5',200),

                     jQuery('#gnb .active_li').addClass('header_type_4',200),
                     jQuery('#gnb .active_li').removeClass('header_type_1 header_type_2 header_type_3 header_type_5',200),

                     jQuery('.gnb>ul>li:last-child').addClass('header_type_4',200),
                     jQuery('.gnb>ul>li:last-child').removeClass('header_type_1 header_type_2 header_type_3 header_type_5',200),

                  jQuery('.gnb>ul>li>a').addClass('header_type_4',200),
                     jQuery('.gnb>ul>li>a').removeClass('header_type_1 header_type_2 header_type_3 header_type_5',200),

                  jQuery('#gnb .active').addClass('header_type_4',200),
                     jQuery('#gnb .active').removeClass('header_type_1 header_type_2 header_type_3 header_type_5',200),

                  jQuery('.logo_text').addClass('header_type_4',200),
                     jQuery('.logo_text').removeClass('header_type_1 header_type_2 header_type_3 header_type_5',200),

                  jQuery('.gnb').addClass('header_type_4',200),
                     jQuery('.gnb').removeClass('header_type_1 header_type_2 header_type_3 header_type_5',200),

                  jQuery('.header').addClass('header_type_4',200),
                     jQuery('.header').removeClass('header_type_1 header_type_2 header_type_3 header_type_5',200),

                  jQuery('.logo-item').addClass('header_type_4',200),
                     jQuery('.logo-item').removeClass('header_type_1 header_type_2 header_type_3 header_type_5',200)" width="100px">



            </div>
            <div class="item">
                <img src="images/header_type5.png" 
         onclick="jQuery('.xe-clearfix').addClass('header_type_5',200),
                  jQuery('.xe-clearfix').removeClass('header_type_1 header_type_2 header_type_3 header_type_4',200),

                  jQuery('.fixed_header .header_wrap').addClass('header_type_5',200),
                  jQuery('.fixed_header .header_wrap').removeClass('header_type_1 header_type_2 header_type_3 header_type_4',200),


                  jQuery('.gnb>ul>li').addClass('header_type_5',200),
                  jQuery('.gnb>ul>li').removeClass('header_type_1 header_type_2 header_type_3 header_type_4',200),

                     jQuery('#gnb .active_li').addClass('header_type_5',200),
                     jQuery('#gnb .active_li').removeClass('header_type_1 header_type_2 header_type_3 header_type_4',200),

                     jQuery('.gnb>ul>li:last-child').addClass('header_type_5',200),
                     jQuery('.gnb>ul>li:last-child').removeClass('header_type_1 header_type_2 header_type_3 header_type_4',200),

                  jQuery('.gnb>ul>li>a').addClass('header_type_5',200),
                     jQuery('.gnb>ul>li>a').removeClass('header_type_1 header_type_2 header_type_3 header_type_4',200),

                  jQuery('#gnb .active').addClass('header_type_5',200),
                     jQuery('#gnb .active').removeClass('header_type_1 header_type_2 header_type_3 header_type_4',200),

                  jQuery('.logo_text').addClass('header_type_5',200),
                     jQuery('.logo_text').removeClass('header_type_1 header_type_2 header_type_3 header_type_4',200),

                  jQuery('.gnb').addClass('header_type_5',200),
                     jQuery('.gnb').removeClass('header_type_1 header_type_2 header_type_3 header_type_4',200),

                  jQuery('.header').addClass('header_type_5',200),
                     jQuery('.header').removeClass('header_type_1 header_type_2 header_type_3 header_type_4',200),

                  jQuery('.logo-item').addClass('header_type_5',200),
                     jQuery('.logo-item').removeClass('header_type_1 header_type_2 header_type_3 header_type_4',200)
                  " width="100px">




            </div>
      <div class="item"><img src="images/slider_header_1.png"></div>
    </div>

    <bar></bar><div class="panel_text">MENU</div>
<div><!-- TABS !-->

            <div class="tabs_1">
            <ul class="tab-links_1">
                <li class="active_1">
                    <a class="button_left" href="#tab1" onclick="jQuery('.header').addClass('text_type_1',200), jQuery('.header').removeClass('text_type_2',200)">일반</a></li>
                <li><a class="button_right" href="#tab2"  onclick="jQuery('.header').addClass('text_type_2',200),
                     jQuery('.header').removeClass('text_type_1',200)">확장</a></li></ul></div>

    <!-- TABS !--> 
            <div class="tabs_2">
            <ul class="tab-links_2">
                <li class="active_2">
                    <a class="button_1" onclick="jQuery('#gnb .active').addClass('menu_style_1',200), jQuery('#gnb .active').removeClass('menu_style_2 menu_style_3',200)">없음</a></li>
                <li><a class="button_2" onclick="jQuery('#gnb .active').addClass('menu_style_2',200),
                     jQuery('#gnb .active').removeClass('menu_style_1 menu_style_3',200)">스타일 1</a></li>

                <li><a class="button_3" onclick="jQuery('#gnb .active').addClass('menu_style_3',200),
                     jQuery('#gnb .active').removeClass('menu_style_1 menu_style_2',200)">스타일 2</a></li>
                </ul></div><br>





        <bar></bar><div class="panel_text">STYLE PACK</div>
    <div>
 <!-- TABS !--> 
            <div class="tabs_1">
            <ul class="tab-links_1">
                <li class="active_1">
                    <a class="button_left" href="#tab1" onclick="jQuery('.header').addClass('text_type_1',200), jQuery('.header').removeClass('text_type_2',200)">일반</a></li>
                <li><a class="button_right" href="#tab2"  onclick="jQuery('.header').addClass('text_type_2',200),
                     jQuery('.header').removeClass('text_type_1',200)">확장</a></li></ul></div>



    <!--
    <br>
       <button onclick="jQuery('.gnb>ul>li').addClass('menu_type_1',200),
                     jQuery('.gnb>ul>li').removeClass('menu_type_2',200),
                     jQuery('.#gnb .active_li').addClass('menu_type_1',200),
                     jQuery('.#gnb .active_li').removeClass('menu_type_2',200)
                     jQuery('.gnb>ul>li:last-childe').addClass('menu_type_1',200),
                     jQuery('.gnb>ul>li:last-child').removeClass('menu_type_2',200)"></button>
!-->







    <br><br>

        <!--<button onclick="
                    jQuery('.fluid_container').addClass('layout_type_2',200),
                    jQuery('.camera_target').addClass('layout_type_2',200),
                    jQuery('.cameraCont, .cameraContents').addClass('layout_type_2',200)"></button>!-->

                  <!--
                  jQuery('.gnb>ul>li>a').css('color','#fff'),
                  jQuery('.logo_text').css('color','#fff'),
                  jQuery('.shrink .gnb>ul>li>a').css('color','#333'),
                  jQuery('.shrink .logo_text').css('color','#333')">!-->



    <!--
<label for="select"></label>
                  <select name="select" id="select" class="select">
                    <option value="on" onclick="jQuery('.fluid_container').css('display','block')">on</option>
                    <option value="off" 
                            onclick="jQuery('.fluid_container').css('display','none')">off</option>
                  </select> !-->            



    <center>
        <!--
        <input type="range" id="slider_menu_width" min="70" max="100">!-->

    <div class="switch">
  <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox" checked>
  <label for="cmn-toggle-1"></label>
</div>

As you can see, there are images, tab buttons, sliders, toggle buttons. And there will be checkboxes and dropdown fields.

The basic function of this website is to see how the website style changes with the jquery function addClass() just like any other wordpress demo sites are using.

The problem is the result will be resetted, when visitors click on other elements, as menue links, etc.

Is there a way I can save that information using jquery cookies or php cookies?

I don't mean that it should remember it forever until people delete their browser cookie. It shall be enough until the browser is closed.

And here is the link to my website : http://lifeto.cafe24.com/xe/today#

Please, please, PLEASE attach your events in JS. That massive code block in the `onclick` handlers is frankly horrific. You should also research DRY coding, as you have a lot of repetition. — Rory McCrossan, Nov 27 '15 at 09:46
i know it is, i actually asked a question here about simplifying the codes,and one gave me something written in javascript. but for now, this is the simplest it can get. — Mark, Nov 27 '15 at 09:47
Cookies are just cookies. jQuery (or more precisely JavaScript) can access them, and PHP can too since they are shared with the server on a request. If you don't specify an expiration time, the cookies when your visitor closes their browser. So yes, cookies can be an approach, and probably the simplest. What happens when you change page is that you reinitialize the JavaScript context. The cookies are not affected by this, though, so they can store the information and you can read them to reapply the style when loading the page. This might imply a latency before the style is applied, though. — Chop, Nov 27 '15 at 09:49
whoever keeps voting -1 for me having some long precise scripts, please be aware that i am new, and how do you expect people to contribute to this system if you keep blocking my accounts from asking a free question? — Mark, Nov 27 '15 at 09:52

score 0 · Answer 1 · edited May 23 '17 at 12:23

0

Your code is a mess. Coz it is not valid. Anyway, for your solution, it is better you use localStorage.

if (localStorage != null)
  localStorage.set("item", "value");

Also, for resolving your mess, please use unobtrusive JavaScript. Instead of:

onclick="some_javascript_code_here" id="element"

Please consider:

$("#element").click(function () {
  some_javascript_code_here
});

From the comments:

localStorage and sessionStorage both extend Storage. There is no difference between them except for the intended "non-persistence" of sessionStorage.

That is, the data stored in localStorage persists until explicitly deleted. Changes made are saved and available for all current and future visits to the site.

For sessionStorage, changes are only available per window (or tab in browsers like Chrome and Firefox). Changes made are saved and available for the current page, as well as future visits to the site on the same window. Once the window is closed, the storage is deleted.

Got the above from another answer: HTML5 Local storage vs. Session storage.

edited May 23 '17 at 12:23

Community

1
1

answered Nov 27 '15 at 09:45

Praveen Kumar Purushothaman

164,888
24
203
252

is localstorage value deleted after browser is closed? – guradio Nov 27 '15 at 09:46
1

@guradio: no. they don't. they are cleared on clear storage. – Milind Anantwar Nov 27 '15 at 09:46
3

I think you mean `sessionStorage` – Rory McCrossan Nov 27 '15 at 09:47
can you be more specific as to how i can use that code using an example? do i put that into every selector or something? – Mark Nov 27 '15 at 09:48
if localStorage dont get clean when browser is closed you need to put something in the code to clean the localStorage when browser is close or when browser is open maybe – guradio Nov 27 '15 at 09:48

score 0 · Answer 2 · answered Nov 27 '15 at 09:52

0

You answered your own question.

Just use cookies, you will need to store some values and everytime the user loads the page, you will need a piece of code to manage what the cookie's content "means".

For example:

Cookie value: menu_tab = 1

    //get the cookie value
    if(menu_tab == 1)
      jQuery("menu-tab").addClass("red");
    else
     jQuery("menu-tab").addClass("invisible");

answered Nov 27 '15 at 09:52

pabloFdz

157
1
11

i totally got what you are saying, at the same time i totally lost a sense of how i can apply that code into mine. can you show me some codes using my elements i wrote above? – Mark Nov 27 '15 at 09:58
Take a look at this http://www.w3schools.com/js/js_cookies.asp Not very difficult and there are examples given. *Note that it could not work in your PC, you will need to run an Apache server (you can use XAMPP) – pabloFdz Nov 27 '15 at 10:03

How to remember addClass events until browser shuts off

2 Answers2