Nov 23, 2022

Level 1

Laravel 9 Session does not work

Hello. I am set session via AJAX call. with below code

Controller

...
public function set_dark_theme(Request $request)
    {
        if(Session::has('dark_theme')) {
            Session::remove('dark_theme');
        }
        else{
            $visit_time = date('F j, Y  g:i a');
            Session::put('dark_theme', $visit_time);
        }
        die();
    }
....

view

@php
$bodyClass = '';
if(session()->has('dark_theme')){
    $bodyClass .= ' dark';
}
@endphp

After AJAX call done. I press refresh page (F5). The session is NULL.

AungHtetPaing__

3 years ago

Level 22

@tuyenlaptrinh I think you don't need to make Ajax call and set session. Use localStorage to set theme.

Code from tailwind doc

// On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  document.documentElement.classList.add('dark')
} else {
  document.documentElement.classList.remove('dark')
}

// Whenever the user explicitly chooses light mode
localStorage.theme = 'light'

// Whenever the user explicitly chooses dark mode
localStorage.theme = 'dark'

// Whenever the user explicitly chooses to respect the OS preference
localStorage.removeItem('theme')

https://tailwindcss.com/docs/dark-mode

1 like

tuyenlaptrinh

3 years ago

Level 1

@AungHtetPaing__ Yes. I used that before. But We will see jump flash with white background before render dark background. I added javascript after body tag.

AungHtetPaing__

3 years ago

Level 22

@tuyenlaptrinh for flashing you need to add cloak. There is v-cloak in vue and x-cloak in alpine js. https://alpinejs.dev/directives/cloak

<style>
	[x-cloak] { display: none !important; } // use v-cloak for vue
</style>

<span x-cloak x-text="message"></span>

Edited: did you place your js before body closing tag?

tuyenlaptrinh

3 years ago

Level 1

@AungHtetPaing__ I placed javascript code after body opening tag and I see white background jump before dark background

AungHtetPaing__

3 years ago

Level 22

@tuyenlaptrinh you should put it before body closing tag (https://stackoverflow.com/questions/63033412/dark-mode-flickers-a-white-background-for-a-millisecond-on-reload). Normally js code place in head and before body close tag after all elements.

tuyenlaptrinh

3 years ago

Level 1

@AungHtetPaing__ Thanks. But how about session in ajax call.

Sinnbeck

3 years ago

Level 102

Is this route in api.php? Session is disabled for api routes

tuyenlaptrinh

3 years ago

Level 1

@Sinnbeck I put route in web.php. I can get session after set in ajax request but lose after reload page

Sinnbeck

3 years ago

Level 102

@tuyenlaptrinh so all routes are in web.php and none in api.php

tuyenlaptrinh

3 years ago

Level 1

@Sinnbeck yes

Sinnbeck

3 years ago

Best Answer

Level 102

@tuyenlaptrinh ah I just noticed you have die();. This stops the session being sent to the browser. Remove that and let laravel handle the response

1 like

tuyenlaptrinh

3 years ago

Level 1

@Sinnbeck thank you so much.

Please or to participate in this conversation.