Local storage item value prefixed with: __q_strn

maggie44 commented 2 years ago

What happened?

When creating a local storage item, the value set is prefixed with __q_strn. For example:

$q.localStorage.set('lang', 'test');

Outputs:

__q_strn|test

What did you expect to happen?

Output should be: test

Reproduction URL

I have been unable to replicate local storage behaviour on jsFiddle

How to reproduce?

Create a new Quasar project (I used Typescript).

Add the localstorage plugin to the quasar.conf.js file, then run the code:

const $q = useQuasar();
$q.localStorage.set('lang', 'test');

Check the local storage in your browser

Flavour

Quasar CLI (@quasar/cli | @quasar/app)

Areas

Components (quasar)

Platforms/Browsers

Firefox, Safari

Quasar info output

Operating System - Darwin(21.3.0) - darwin/arm64
NodeJs - 14.17.2

Global packages
  NPM - 6.14.13
  yarn - 1.22.17
  @quasar/cli - 1.2.2
  @quasar/icongenie - 2.4.2
  cordova - Not installed

Important local packages
  quasar - 2.5.5 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app - 3.3.3 -- Quasar Framework local CLI
  @quasar/extras - 1.12.5 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.31 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.0.12
  vuex - Not installed
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.17.2 -- Babel compiler core.
  webpack - 5.68.0 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.7.4 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.5.5 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Relevant log output

No response

Additional context

No response

github-actions[bot] commented 2 years ago

Hi @maggie0002! 👋

It looks like you provided an invalid or unsupported reproduction URL. Do not use any service other than Codepen, jsFiddle, Codesandbox, and GitHub. Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc. Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

soulsam480 commented 2 years ago

I think this is expected as quasar prefixes __q_strn to keep track of original value type. You can try to use $q.localStorage.get('lang') and it should give you test.

maggie44 commented 2 years ago

It wasn't changing even when I used the .getItem(). Turns out though, I had missed the $q:

Returned a string, but included the prefix: localStorage.get('lang')

Returned the correct string: $q.localStorage.get('lang')

The missing $q was just a typo, but as it didn't error I missed it.

quasarframework / quasar