Implement the localstorage in the Customize AdminLTE

[bernardananaburnz]

I have been using the Admin LTE2 and the dashboard rocks. If the localstorage will also be implemented in the LTE3 then this dashboard is all that would make it 100% the best front-end UI.

[danny007in]

its only for demo purpose

[bernardananaburnz]

Can the local storage like in the LTE2 demo.js also be added or implemented in the demo.js in LTE3 so the users can change the theme locally? Currently, theme changes in LTE is not storing when refreshing the page.

[yanikkumar]

You can store the value in cookies using jquery Which will help maintaining the state.

[danny007in]

While checking other pages
state will impact that also.

[bernardananaburnz]

If possible to share the code on storing the cookies or localStorage for example under Navbar Variants or maybe as a Maintainer when releasing the latest update to add it in the demo.js file to store the settings using localStorage or cookies.

[danny007in]

I did it for docs #3522

[bernardananaburnz]

I look at the recent updates and when unchecking the dark mode option then refresh the page, it still returned to dark mode. I look at the LTE2 demo.js file and see that this function should be added to the next version updates when changing theme colors

[danny007in]

@bernardananaburnz feel free to create PR (Pull request) 😄

[bernardananaburnz]

I made a local custom code and it did work. I am not used to do some pull request yet.

`// ------------------ onload
var skinz = get('navbar');

var $headernav = $('.main-header')

$headernav.removeClass('navbar-dark').removeClass('navbar-light')
var lightdark = returnDarkLight(skinz);

$headernav.addClass(lightdark)
$headernav.addClass(skinz)

// end main header

/**

• Get a prestored setting
• @param String name Name of of the setting
• @returns String The value of the setting | null
  */
  function get(name) {
  if (typeof (Storage) !== 'undefined') {
  return JSON.parse(localStorage.getItem(name))
  } else {
  window.alert('Please use a modern browser to properly view this template!')
  }
  }

function returnDarkLight(navbar){
var skin = '';
var navbar_dark_skins = [
'navbar-primary',
'navbar-secondary',
'navbar-info',
'navbar-success',
'navbar-danger',
'navbar-indigo',
'navbar-purple',
'navbar-pink',
'navbar-navy',
'navbar-lightblue',
'navbar-teal',
'navbar-cyan',
'navbar-dark',
'navbar-gray-dark',
'navbar-gray'
]

if(navbar_dark_skins.includes(navbar)==true){
  skin = 'navbar-dark';
}
else{
  skin = 'navbar-light';
}
return skin;

}
//-------------------------------------------------------------------------------------------- end on load

// demo.js Admin LTE 3.0.5 (add the store function)
/**

• Store a new settings in the browser
• @param String name Name of the setting
• @param String val Value of the setting
• @returns void
  */
  function store(name, val) {
  if (typeof (Storage) !== 'undefined') {
  localStorage.setItem(name, JSON.stringify(val))
  } else {
  window.alert('Please use a modern browser to properly view this template!')
  }
  }

// insert this line after $main_header.addClass(color)
store('navbar', color)
`