Issues have been raised with IE11's refusal to accept string(variable) as a parameter for the localStorage

Why is it that Internet Explorer does not recognize a string variable as a parameter for the setItem method, even though it works fine in Chrome?

For example, in IE:

This code snippet works:

var itemName = 'anyname';
localStorage.setItem(itemName, 'anything');

But this one does not work:

var itemName = 'anyname';
var stringName = 'some string content';
localStorage.setItem(itemName, stringName);

Instead, an 'Invalid argument error' is thrown. Any insight on how to resolve this issue would be greatly appreciated! :)

EDIT. The previous post mentioned another problem, but the example provided actually works for me! My issue lies in the fact that the setItem method does not accept a string variable as expected, unlike a regular quoted string. The solution suggested in the related post is not viable for my situation, as I cannot rely on end users installing an IE11 bug-fix.

Answer №1

Upon thorough investigation, it became apparent that the issue resided in the composition of your string. It seems that IE11's setItem method does not support certain characters, such as '|' and '~', which were present in my original string.

The solution I discovered was to utilize encodeURI(yourStringHere) prior to passing it to the setItem method, followed by decodeURI after retrieving it.

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

The subsequent menu selection will be based on the chosen menu value

I am attempting to accomplish the following: https://i.sstatic.net/JffUWC02.png Essentially, I need a select options menu with labels where selecting an option will display a corresponding value. These values should then become labels for a second selec ...

Trouble customizing Mui v5 styles with themes in styleOverrides

I'm attempting to style using theme overrides according to the instructions in the provided documentation. You can find my code in this sandbox: import * as React from 'react'; import { ThemeProvider, createTheme } from '@mui/material/ ...

I am able to see the Redux props showing up in Redux DevTools, but for some reason they are not

I am facing an issue where I am passing a Redux prop to a component that is fetched from a payload. The payload successfully updates the state in my reducer and the component receives the prop (an array of objects fetched in the action) according to my Red ...

What is the method for concatenating two strings in JavaScript without any whitespace in between?

When working with two strings involving time, consider the following scenario: var gettime= $("#select-choice-2 :selected").text(); The above code returns a time value in 24-hour format, such as 17:45 However, if you require the time to display in the ...

What is the best way to include a text input as the last option in a Select input form field?

I would like to implement a select input feature where users can choose from predefined options, with the added functionality of including a text input field as the last option for users who prefer to enter their own category. How can I achieve this? Curr ...

Retrieving Data from a JSON Object Using a Specific Key

Received a JSON response similar to the one below { "SNGS": { "$": { "xmlns": "csng", "xmlns:ns2": "http://www.w3.org/1999/xlink" }, "Defec ...

Is it possible to utilize the useRef Hook for the purpose of storing and accessing previous state values?

If you have already implemented the useState and useEffect Hooks for maintaining previous state, another approach is to utilize the useRef Hook to track previous state values as well. ...

How can I access an InputStream from a local XML file in a PhoneGap application?

Looking for advice on how to fetch an inputstream from a local XML file using JavaScript in my PhoneGap application. I'm new to JavaScript, so any guidance would be appreciated! ...

Solving repeated function firing with ng-checked in an AngularJS ng-repeat loop

In the HTML code below, there is an ng-repeat that creates checkboxes: <span ng-repeat="name in $ctrl.widgetSelectorNames" class="widget-selectors"> <label class="checkbox" for="{{name}}"> <input type="checkbox" value="{ ...

Top tips for writing JavaScript that incorporates an AJAX call to determine whether the default action should be blocked

Utilizing JavaScript and jQuery, I am developing a handler for form submission that will either allow or prevent the form from being submitted based on certain conditions. Although this task is fairly straightforward, it becomes more complex due to the ne ...

`How to implement a dark mode feature in Tailwind CSS with Next.js and styled-jsx`

My website is created using Next.js and Tailwind CSS. I followed the default setup instructions to add them to my project. In order to style links without adding inline classes to each one, I also integrated styled-jsx-plugin-postcss along with styled-jsx ...

Display HTML components depending on an object's property using AngularJS

Here is the code I have created to display a simple drop down list: var products = [ { "id": 1, "name": "Product 1", "price": 2200, "category": "c1" }, { "id": 2, "name": "Product 2", "p ...

Floating elements within scrolling loading

I've been trying to figure out how to add a loading scroll feature to my webpage, but I'm running into issues with the div not displaying correctly. Instead of loading underneath the scroll, the content pops up on the side as shown here when scro ...

The Handlebars helper needs to provide a result when a value is present

I have created a Handlebars helper function like this: Here is the code in my JavaScript file: Handlebars.registerHelper('switch', function (sw_val, options) { if (sw_val != '*NONE' && sw_val != false && sw_val != ...

Removing invalid characters in a *ngFor loop eliminates any elements that do not meet the criteria

I am facing an issue with my *ngFor loop that is supposed to display a list of titles. fetchData = [{"title":"woman%20.gif"},{"title":"aman",},{"title":"jessica",},{"title":"rosh&quo ...

Troubleshooting the AutoHeight Problem in Slidesjs

My issue revolves around Slidesjs which can be found at . Specifically, I am facing a problem with autoHeight feature not displaying properly in Chrome. Initially, the height of slides shows as 0px but upon clicking to the next slide, it adjusts to the c ...

When determining the extent to which client-side code should be utilized

As I work on developing a website with an extensive admin section, I am contemplating the amount of logic to incorporate on the client side. Using Ruby on Rails, I have the option of generating admin pages solely server-side with light client-side code for ...

Leverage Selenium WebDriver to validate a JavaScript variable through an assertion

During my Selenium WebDriver testing of a webpage, I encountered a situation where I needed to make an assertion on a JavaScript file but was uncertain about the process. The specific assertion I wanted to make was regarding the length of the servers arra ...

Execute CSS within jQuery code only when the body class is present

I am attempting to use CSS (display: none;) within a script to hide elements from my menu only if a specific language is active. When the body class changes from one language to another, I want the script to check if the body class of a certain language ...

What steps should I take to display a Material UI grid in React without triggering the warning about the missing unique key

In my current project, I am utilizing React and Material UI to display a grid. The grid's rows are populated from an array of data, with each row containing specific information in columns structured like this: <Grid container> {myData.map((re ...