Utilize Chrome storage instead of localstorage to generate Parse sessions

Question

Utilize Chrome storage instead of localstorage to generate Parse sessions

I'm currently developing a Chrome Extension that relies on Parse User sessions. Because localstorage is limited to specific domains, I am looking to utilize chrome.storage so the data can be accessed across any site.

The existing Parse Javascript SDK uses localstorage for storing user objects and creating sessions. How can I modify this behavior to switch to using chrome.storage instead?

Here is my current approach:

on login
   store session token in chrome.storage

Then, during site visits:

if chrome.storage.sessiontoken
    create Parse session with the stored session token from chrome.storage

I'm trying to find a simpler solution, so if anyone has any suggestions, I'd appreciate it!

I wish I could just do: window.localstorage = chrome.storage

But I suspect that may cause issues. Has anyone found a way around this problem?

javascript google-chrome session parse-platform google-chrome-extension

Answer 1

Answer №1

To effectively store data in a Chrome app using Parse, you'll need to create a custom storage controller utilizing the chrome API. This allows for a more efficient and non-blocking storage solution compared to the default window.localStorage API used by Parse.

Fortunately, Parse SDK is designed to support various types of storage (both synchronous and asynchronous) and enables users to set their own storage controller. Before initializing Parse, make sure to call

Parse.CoreManager.setStorageController(YOUR_STORAGE_CONTROLLER)

.

For example, you can refer to the Parse React Native storage controller on GitHub, which demonstrates an asynchronous storage approach:

A Sync controller object should have its async property set to 0 with functions like getItem, setItem,removeItem, and clear
An Async controller object should have its async property set to 1 with functions like
```
getItemAsync, setItemAsync, removeItemAsync,
```
and clear

Simply follow the example provided by Parse React Native to build your own custom storage controller using the chrome.storage API. This will enable Parse to utilize your controller instead of relying on localStorage.

For the original discussion on Github, visit: https://github.com/ParsePlatform/Parse-SDK-JS/issues/72

Answer 2

To effectively store data in a Chrome app using Parse, you'll need to create a custom storage controller utilizing the chrome API. This allows for a more efficient and non-blocking storage solution compared to the default window.localStorage API used by Parse.

Fortunately, Parse SDK is designed to support various types of storage (both synchronous and asynchronous) and enables users to set their own storage controller. Before initializing Parse, make sure to call

Parse.CoreManager.setStorageController(YOUR_STORAGE_CONTROLLER)

.

For example, you can refer to the Parse React Native storage controller on GitHub, which demonstrates an asynchronous storage approach:

A Sync controller object should have its async property set to 0 with functions like getItem, setItem,removeItem, and clear
An Async controller object should have its async property set to 1 with functions like
```
getItemAsync, setItemAsync, removeItemAsync,
```
and clear

Simply follow the example provided by Parse React Native to build your own custom storage controller using the chrome.storage API. This will enable Parse to utilize your controller instead of relying on localStorage.

For the original discussion on Github, visit: https://github.com/ParsePlatform/Parse-SDK-JS/issues/72

Answer 3

Answer №2

Substituting localstorage with chrome.storage directly is not possible due to their synchronous and asynchronous nature, as well as differences in API methods.

While it's not feasible to make the switch fully synchronous, there are some potential solutions:

Handle storage operations in the background script where the domain for localStorage remains fixed.
Create a local synchronous data copy of the storage like so:
```
var localData = {};
chrome.storage.local.get(null, function(data) {
  localData = data;
  doSomethingElse(); // This part is async
})
```
However, managing updates to this cache will pose challenges as you'll need to intercept writes and synchronize with chrome.storage, which may lead to asynchronous issues.

In essence, if a library utilizes localStorage internally, replacing it effectively without rewriting the library or utilizing the background context may prove difficult.

Answer 4

Substituting localstorage with chrome.storage directly is not possible due to their synchronous and asynchronous nature, as well as differences in API methods.

While it's not feasible to make the switch fully synchronous, there are some potential solutions:

Handle storage operations in the background script where the domain for localStorage remains fixed.
Create a local synchronous data copy of the storage like so:
```
var localData = {};
chrome.storage.local.get(null, function(data) {
  localData = data;
  doSomethingElse(); // This part is async
})
```
However, managing updates to this cache will pose challenges as you'll need to intercept writes and synchronize with chrome.storage, which may lead to asynchronous issues.

In essence, if a library utilizes localStorage internally, replacing it effectively without rewriting the library or utilizing the background context may prove difficult.

Utilize Chrome storage instead of localstorage to generate Parse sessions

Answer №1

Answer №2

Similar questions

What is the best approach for creating a brute-force solution for finding the smallest change algorithm

An easy way to enable mobility for BootstrapDialog on mobile devices

Steps to dynamically populate a datatable with JSON data by triggering a click event in jQuery

Utilizing SlickGrid and DataView for calculating totals efficiently without the need for grouping

Can a hyperlink exist without a specified href attribute?

The div block containing the table is experiencing horizontal overlap as additional elements are inserted

I am looking to modify the ID of the select element nested within a td tag

How can I successfully implement the Add To Calendar Button Package?

How can I extract information from Firebase and set it in the this.props of a React component?

AngularJS application: the button requires two clicks to activate

What is the best way to utilize my data with Charts.js for my specific situation?

Guide to Saving a List in Local Storage

"Utilizing Javascript's Regex to selectively replace only the first character

What is the process for combining AngularJS filters?

I am looking to customize the color of my Material UI switch

Ways to identify the moment jQuery datatable is initialized and populated with information

In what format is the parameter accepted by the .getDay() method?

When a click event triggers, use the .get() method in jQuery to retrieve the content of a page and then update

The jQuery function appears to be running multiple times in a loop

Transferring data from jQuery Ajax to PHP