Jquery Cookie Laravel Package

Getting Started

Minimal Steps

1. Include jQuery and the plugin in your Laravel project’s assets:

   <!-- resources/views/layouts/app.blade.php -->
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="{{ asset('js/jquery.cookie.js') }}"></script>
   

   • Place jquery.cookie.js in public/js/ and reference it via asset().

2. First use case: Set a session cookie

   // resources/js/app.js
   $(document).ready(function() {
       $.cookie('user_prefs', 'dark_mode', { expires: 30 }); // 30 days
   });
   

3. Retrieve a cookie in Blade

   @php
       $prefs = json_decode($_COOKIE['user_prefs'] ?? '{}', true);
       $theme = $prefs['theme'] ?? 'light';
   @endphp
   <div class="theme-{{ $theme }}">...</div>
   

Implementation Patterns

Workflows

1. User Preferences Storage

   • Store complex preferences (e.g., UI settings) as JSON:

     $.cookie('ui_settings', JSON.stringify({
         fontSize: 14,
         notifications: true
     }), { expires: 365 });
     

   • Retrieve and parse in Laravel:

     $settings = json_decode($_COOKIE['ui_settings'] ?? '{}', true);
     

2. CSRF Token Sync (Legacy)

   • Sync CSRF token across tabs (if not using Laravel’s built-in session driver):

     // Broadcast changes to other tabs
     $(window).on('storage', function(e) {
         if (e.key === 'XSRF-TOKEN') {
             $.cookie('XSRF-TOKEN', e.newValue, { expires: 1 });
         }
     });
     

3. Conditional Cookie Logic

   • Check cookie existence before acting:

     if ($.cookie('has_seen_tutorial')) {
         $('#tutorial-modal').hide();
     }
     

Integration Tips

• Laravel Mix: Bundle with other JS files:

  // webpack.mix.js
  mix.js('resources/js/app.js', 'public/js')
       .copy('node_modules/jquery.cookie/jquery.cookie.js', 'public/js');
  

• Vue/React: Use cookies for auth tokens (if not using Laravel Sanctum):

  // Vue example
  export default {
      mounted() {
          const token = $.cookie('auth_token');
          if (token) this.fetchUserData(token);
      }
  };
  

• Server-Side Validation: Validate cookies in Laravel middleware:

  public function handle($request, Closure $next) {
      if (!isset($_COOKIE['required_cookie'])) {
          abort(403);
      }
      return $next($request);
  }
  

Gotchas and Tips

Pitfalls

1. Deprecation Risk

   • The package is archived (2014) and lacks modern browser support. Use only for legacy projects or as a temporary solution.
   • Alternative: Replace with js-cookie (modern, actively maintained).

2. MIME-Type Issues

   • Never load directly from GitHub’s raw URL (blocked in IE). Always host locally or use a CDN.

3. Laravel Session Conflicts

   • Avoid mixing this with Laravel’s session driver for auth tokens (use session() helper instead).

4. JSON Serialization

   • Cookies have size limits (~4KB). Avoid storing large objects:

     // Bad: Large object
     $.cookie('data', hugeObject);
     
     // Good: Store IDs or hashes
     $.cookie('data_id', 123);
     

Debugging

• Check Cookie Existence:

  console.log($.cookie('test')); // undefined if missing
  

• Clear Cookies:

  $.removeCookie('debug_token');
  

• Server-Side Debugging:

  // Dump all cookies in Laravel Tinker
  dd($_COOKIE);
  

Extension Points

1. Custom Cookie Path/Domain
   • Override defaults for multi-tenant apps:

     $.cookie('tenant_id', '123', {
         path: '/',
         domain: '.yourdomain.com'
     });
     

2. Secure Cookies
   • Force Secure flag for HTTPS-only cookies:

     $.cookie('api_token', 'abc123', {
         secure: true,
         sameSite: 'Strict' // Modern browsers
     });
     

3. Laravel Helper
   • Create a facade for consistency:

     // app/Helpers/CookieHelper.php
     class CookieHelper {
         public static function get($name) {
             return $_COOKIE[$name] ?? null;
         }
     }