What could be causing localstorage to malfunction in Firefox 57 and Vuejs2?

I am looking to implement language change functionality in my application by clicking on the language name. I am currently using vuex-i18n to manage the language settings in the frontend. However, I have encountered an issue with localStorage not functioning properly in Firefox (version 57). This issue does not occur in Chrome or Edge (I have verified that dom.storage.enabled is set to true in the config). Here is a snippet of my component code:

<template>
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        ...
    </div>
</nav>
</template>

<script>  
import 'vue-awesome/icons';
import {HTTP} from '../common/http-common';  
export default {
    props: ['topNavbarOptions'],
    data: function () {
        return {
            menuclicked: false

        }
    },
    created: function() {
       this.$i18n.set(localStorage.getItem("locale"));
    },
    methods: {
        OpenMenu: function(menuclicked) {
            this.menuclicked = !menuclicked;
            this.$emit('openmenu', this.menuclicked);
        },
        setLanguage: function(locale) {
          HTTP.get('lang/' + locale)
          .then(response =>{
              //Set locale from backend
            localStorage.setItem("locale", locale);

          })
          .catch(error=>{
          console.log(error);
          });

        }

    }

}
</script>

In addition to using axios for my HTTP calls, I am exploring alternative ways to handle language switching without relying on localStorage or sessionStorage. Are there any changes I can make to my code to ensure compatibility with Firefox?

Thank you for your assistance.

Answer №1

Have you experimented with window.localStorage? It is known to be independent of context and scope.

Answer №2

attempt to

  1. clear the local storage for this website in your browser settings. URL=about:preferences#privacy
  2. exit Firefox
  3. reopen Firefox

This solution resolved the issue for me - after upgrading to version 57, my profile somehow became corrupted. On Windows, you can locate the Firefox profile at: C:\Users[youraccountname]\AppData\Local\Mozilla\Firefox\Profiles\

Answer №3

I encountered an issue that required me to modify my code in order to find a solution. The problem arose when the LocalStorage was placed within an axios http response (specifically in the setLanguage method). Surprisingly, the code worked fine in Chrome but failed in Firefox as the LocalStorage appeared empty. Interestingly, moving the LocalStorage outside of the response resolved the issue.

<script>  
import  'vue-awesome/icons';
import {HTTP} from '../common/http-common';  
export default {
    props:['topNavbarOptions'],
    data: function () {
        return {
            menuclicked: false,
            locale:'en'

        }
    },
    mounted:function(){

      if(localStorage.getItem("locale"))
        {
          this.locale = localStorage.getItem("locale");
        }
           this.$i18n.set(this.locale);

   },
    methods: {
        OpenMenu: function (menuclicked) {
            this.menuclicked = !menuclicked;
            this.$emit('openmenu', this.menuclicked );
        },
        setLanguage:function(localecode)
       {  
          //Set front end locale
         localStorage.setItem("locale",localecode); 
          //Set backend locale
          HTTP.get('lang/'+localecode)
          .then(response =>{

          })
          .catch(error=>{
          console.log(error);
          });

        }



    }

}
</script>

Answer №4

Give this a shot:

browser.storage.local.get() - for fetching information browser.storage.local.set() - for sending data

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to adjust the maximum width of Reddit's embedded comment iframe?

Reddit provides a code that can be embedded to display their comments on a website, As an example: <div class="reddit-embed" data-embed-media="www.redditmedia.com" data-embed-parent="false" data-embed-live="false" data-embed-uuid="24a3e666-f855-4664 ...

Guide to redirecting data from an external POST request to a customer through a GET request

Within my Express application, I am currently dealing with both incoming POST requests containing a payload from an external source and GET requests sent by my client: router.post('/liveReleaseStore', (req, res) => { let data = req.body.m ...

Error in ReactJS: Attempting to access property 'preventDefault' of an undefined value

Looking to implement a simple onClick event/function in ReactJS. Upon clicking the button, I intend to execute a function named "onClick", but I encounter this error message in the console: app.js:62 Uncaught TypeError: Cannot read property 'prevent ...

What makes NPM thrive while submodules struggle with construction?

My experience with utilizing npm has often involved encountering seemingly meaningless errors - such as Visual Studio projects failing to build and build tools (e.g. python.exe / CL.exe) being unavailable on the command line. For instance, some packages t ...

Angular allows for the creation of dynamic and interactive scenes using Canvas and Three.js

I am in the process of developing a collection of web apps within an Angular SPA. Each individual application is encapsulated within an Angular template, and when navigating between them, specific DOM elements are replaced and scripts from controllers are ...

Ways to monitor automatic data alterations within a Vue JS component

I have a method that updates data within the component itself, for example: Vue.component('component', { template: '#component', data: function () { return { dataToBeWatched: '' } }, methods: { chang ...

Refine your MongoDB collections with multiple filtering options

My dataset looks like this: [ {"userId": "0000", "algorithm": "algo1", "status": "Running", "waitingTime": 0}, {"userId": "0001", "algorithm": &qu ...

The impact on performance when adding more components in Vue.js

As I work on developing my app, I find myself faced with a complex component that requires reworking. One idea I had was to split the sub functionalities of this component into separate components for easier maintenance. However, I am wondering if adding m ...

now.js - There is no method in Object, however the click event works in jQuery

Here is a simple NowJS code snippet for the client side: $j(document).ready(function() { window.now = nowInitialize('http://xxx.yyy:6564'); now.recvMsg = function(message){ $j("body").append("<br>" + message); } $ ...

Encountering Error with Axios in Nuxt while Navigating Pages

Working on a nuxt application utilizing axios for API calls. In my index.vue file, I have the code snippet below. <template> <div> <Hero /> <Homebooks :details="details" /> </div> </template> <s ...

Avoid constantly updating the rendering in React by utilizing callback functions

Is there a way to prevent Component B from rendering when I am only making changes in Component A? For example, if console.log("A") is associated with Component A and console.log("B") with Component B, I expect that updating text in Component A will only ...

Issues with Express js routing functionality and executing mysql queries

As I dive into learning Node and Express, I'm encountering issues with routing in Express. I aim to create a well-organized and modular code for handling routes, particularly when querying data from a MySQL database: Let's start with my app.js f ...

The combination of Vue init and Firebase init led to the creation of intricately nested

My project journey began with Vue CLI, generating the usual package.json, setting up node_modules, and so on. Next, I initiated a Firebase project in the same directory using firebase init, opting for functions. This action birthed a new folder called fun ...

Interacting with dynamically loaded HTML content within a div is restricted

On my main HTML page, I have implemented a functionality that allows loading other HTML pages into a specific div using jQuery. The code snippet looks like this: $('.controlPanelTab').click(function() { $(this).addClass('active').s ...

Obtaining the category value within a slot of the Vuetify calendar

I am struggling to implement hover functionality in the categories view of Vuetify calendar within the body section (slot day-body). When I try to add hover functionality, the entire row ends up being affected by the hover effect, even though I only want i ...

Implementing advanced checkbox filtering feature in React

Does anyone have experience with creating dynamic Checkbox filtering in React using Material-UI? I'm finding it challenging because the checkbox options are generated dynamically from incoming data and need to be categorized by type of Select componen ...

Creating a custom comparison method between two select dropdowns using the jQuery Validation plugin

In my HTML code, I have two select elements: <label for="h_slat_type">Horizontal Slat Type</label> <select name="h_slat_type" id="h_slat_type"> <option disabled="disabled" selected>Select</option> ...

Access and listen to the stored blob file that contains MP3 audio

Essentially, I am looking to stream a blob MP3 file in Firefox. I have both the blob itself: blob (sliced with mime type audio/mpeg3), and its URL: blobURL = window.URL.createObjectURL(blob). I attempted to do so using: an HTML5 audio player: <audi ...

Understanding how to decode querystring parameters within a Django view

In the application I'm working on, there is a search form that utilizes a jQuery autocomplete plugin. This plugin processes the querystring and sends back the suggested item using encodeURI(q). For example, an item like Johnny's sports displays ...

You are unable to define a module within an NgModule since it is not included in the current Angular compilation

Something strange is happening here as I am encountering an error message stating 'Cannot declare 'FormsModule' in an NgModule as it's not a part of the current compilation' when trying to import 'FormsModule' and 'R ...