如何使用 ES6 模板文字定义 sessionStorage 键

Question

我正在尝试使用 ES6 模板文字语法来设置 sessionStorage，其中部分键是活动选项卡 ID。

我首先尝试将 ES6 模板文字放入方法中：

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

但这不会编译。

我接下来在我的方法中创建了一个常量，然后在 sessionStorage 方法中引用它：

//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))

我不确定什么是正确的语法，但都失败了并出现了错误：

 SyntaxError: Unexpected token u in JSON at position 0

我的目标是找到一种方法来动态检查存储以查看它们的密钥是否存在，如果不存在则进行设置。

除了高层次的理解外，我对 sessionStorage 不是很熟悉。我知道键和值必须是字符串。

我正在使用 React 和 Redux

Answer 1

window.sessionStorage can be combined with JSON.stringify() and JSON.parse() 为会话提交数据。

请参阅下面的实际示例，包括 Template Literals 和未找到 sessionStorage Item 情况下的安全转义。

// 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)

如何使用 ES6 模板文字定义 sessionStorage 键

How to use ES6 template literal in defining sessionStorage key

javascript

ecmascript-6

string-interpolation

sessionstorage

template-literals