How to use ES6 template literal in defining sessionStorage key

Question

I am trying to use ES6 template literal syntax to set sessionStorage where part of the key is the active tab id.

I attempted first to put the ES6 template literal within the method:

sessionStorage.getItem(`tabContent + ${this.props.activeTabKey}`)

But this wouldn't compile.

I next created a constant within my method and then referred to it within the sessionStorage method:

//attempt 1
const activeTabSessionStorageName = `tabContent + ${this.props.activeTabKey}`
(sessionStorage.getItem(`${activeTabSessionStorageName}`))

// attempt 2

const activeTabSessionStorageName = `tabContent + ${this.props.activeTabKey}`

  sessionStorage.getItem(JSON.stringify(activeTabSessionStorageName))

//attempt 3
const activeTabSessionStorageName = `tabContent + ${this.props.activeTabKey}`
(sessionStorage.getItem(this.activeTabSessionStorageName))

I am not sure what would be the correct syntax but both failed and came up with the error:

 SyntaxError: Unexpected token u in JSON at position 0

My goal is to have a way to dynamically check the storage to see if they key exists and then set it if not.

I am not that familiar with sessionStorage other than high level understanding. I know the key and the value have to be strings.

I am using React and Redux

There's absolutely nothing wrong with the very first thing you posted: `sessionStorage.getItem(\`tabContent + ${this.props.activeTabKey}\`)`. So let's go back to that. When you say `it wouldn't compile` what error message did you get? — Adam Jenkins, Feb 28 '18 at 00:51
Note if you are meaning to concatenate `tabContent` to whatever `activeTabKey` is you do not need the concatenation (`+`) operator just have it as `tabContent${this.props.activeTabKey}` — Patrick Evans, Feb 28 '18 at 00:53
@PatrickEvans - that's true, but it's neither here nor there in solving the problem and probably only serves to confuse the OP. The string `tabContent + someIdentifier` is just as valid as `tabContentsomeIdentifier` — Adam Jenkins, Feb 28 '18 at 00:53
@Adam, didn't say it would solve the problem, hence why i preceded the statement with _"Note"_ — Patrick Evans, Feb 28 '18 at 00:54
I get an error: SyntaxError: Unexpected token u in JSON at position 0 @Adam — mandajoan, Feb 28 '18 at 02:19
code for error: if (sessionStorage.getItem(JSON.stringify(`tabContent + ${this.props.activeTabKey}`))){ tabItems = JSON.parse(sessionStorage.getItem(JSON.stringify(`tabContent + ${this.props.activeTabKey}`))) — mandajoan, Feb 28 '18 at 02:20

Arman Charan · Accepted Answer · 2018-02-28T02:25:27.157

Your error is likely a result of attempting to JSON.parse() an undefined value.

window.sessionStorage can be combined with JSON.stringify() and JSON.parse() to commit data for sessions.

See below for a practical example, including Template Literals and a safe escape for cases when no sessionStorage Item is found.

// Hypothetical Object.
const hypotheticalObject = {
  id: 'unique id',
  data: 'data ..'
}

// Set Object to Session Storage.
window.sessionStorage.setItem(`CONTENT + ${hypotheticalObject.id}`, JSON.stringify(hypotheticalObject))

// Get Object.
const retrievedObject = window.sessionStorage.getItem(`CONTENT + ${hypotheticalObject.id}`) && JSON.parse(window.sessionStorage.getItem(`CONTENT + ${hypotheticalObject.id}`)) || false

// Log.
console.log(retrievedObject)

Thank you for the answer. I was unsure of the syntax of my statement so I wasn't sure if it was an issue with that or with the value. I need to re-order the rendering so the value isn't undefined when the component mounts. Thank you! — mandajoan, Feb 28 '18 at 02:27

How to use ES6 template literal in defining sessionStorage key

1 Answers1