tymondesigns / angular-locker Goto Github PK

Hi.

I just added my own custom driver that uses cookies for storage, and works fine for the most part. Some functionality in my app needs just a bit more space than cookies can handle, so I want to disable that functionality when user's using a browser that does not support localStorage, like Safari in private mode.

To keep from having to test everywhere if localStorage is available and / or manually set the proper driver, I chucked it all in my Locker extension:

app.config(['CookieStorageProvider', 'lockerProvider',
  function (CookieStorageProvider, lockerProvider) {
    var defaults = {
      driver: 'local',
      namespace: 'my.namespace',
      separator: '_',
      eventsEnabled: true,
      extend: {}
    };

    try {
      localStorage.setItem('localStorageTest', 'localStorageTest');
      localStorage.removeItem('localStorageTest');
      lockerProvider.defaults(defaults);
    } catch(e) {
      defaults.extend = {
        cookieStorage: CookieStorageProvider.get()
      };

      defaults.driver = 'cookieStorage';
      lockerProvider.defaults(defaults);
    }
  }
]);

I haven't quite figured out if Locker is meant to use whatever driver(s) are available, and switch between them, leaving it unnecessary and undesirable for developers to even know what happens behind the curtains other than setting desired driver (default). If so, this might not be the right approach, and the feature request redundant. If Locker, on the other hand, is supposed to use one driver at the time (unless explicitly switched), then it would be nice to be able to call something like locker.getDriverName(), that would return 'cookieStorage' in the case of Safari private mode etc. in my case.

I'm using the "private" locker._options.driver attribute to achieve this right now, but that's hardly the intention.

👍 Good or 👎 garbage?

When I do locker.put('key', null) it does not store the value properly. Is this intended using locker? localStorage takes the value just fine.

We need to be able to support Safari private browsing in our project but if the storage isn't supported, the browser just throws a JS exception and our angular app doesn't initialize. I've noticed the use of Remy's Polyfill but is this just a plug and play script? How exactly am I supposed to use this in a project?

Currently we fallback to $cookies using locker.isSupported() but I don't understand the point of this function if I can't call or check it?

I understand the concept of binding to $scope. However, the examples don't take the recommended controller as syntax into account. Not sure what that would look like?

I am storing some data in localStorage, but after calling window.history.back(), the data gets reset, for page refresh it works fine. How do deal with window.history.back() scenario.

Thanks in advance.

Is it compatible with angular 1.4/material?

I tried to use lockerProvider, but it seems like it's not working as documented:

.config(['lockerProvider', function config(lockerProvider) {
lockerProvider.setDefaultDriver('session')
.setDefaultNamespace('myAppName')
.setSeparator('.')
.setEventsEnabled(false);
}]);

I tried to search for the configuration in the source code, I don't see any of them. Is this still supported?

The version is angular-locker "2.0.4".

If I put the value in storage " locker.driver('local')", the value will always be saved even I close the browser.

But If I used "locker.driver('session')" to save value, The value won't be get in another tab.

Could yo please give me some suggesion?

Thank you.

.config(function (lockerProvider) {
  lockerProvider
      .setDefaultDriver('local')
      .setEventsEnabled(true)
})

.run(function ($rootScope, locker) {
   locker.bind($rootScope, 'session')
})

I expected that to mean "root scope and local storage are always in sync for session key even across browser tabs", but it actually meant "setting root scope session also sets local storage session".

Firebase for example initializes values and updates them when things change (https://www.firebase.com/docs/web/libraries/angular/api.html#angularfire-firebaseobject-bindtoscope-varname).

Chrome Version 49.0.2623.87 (64-bit) shows following error:
Failed to parse SourceMap: http://.../bower_components/angular-locker/dist/angular-locker.min.js.map
I think it's due to this line:
/*! angular-locker v2.0.4 | (c) 2016 @tymondesigns | https://github.com/tymondesigns/angular-locker */

angular is undefined when using Webpack and ES6 syntax

Uncaught TypeError: Cannot read property 'module' of undefined

That error is thrown at this line

angular.module('angular-locker', [])

Example setup..

import angular from 'angular';
import 'angular-locker';

let appModule = angular.module('app', [
'ui.router',
'angular-locker'
])

.factory('MyFactory', function MyFactory(locker) {
locker.put('someKey', 'someVal');
});

should be :

.factory('MyFactory', ['locker', function MyFactory(locker) {
locker.put('someKey', 'someVal');
}]);

in 7e0393d you removed the helper methods to set defaults in the provider but the documention in the README still indicates they can be used. If I get time this week I'll put in a pull request if no one has already.

Hi,

I've got a weird issue while trying to set multiple session values using the latest release (2.0.1). My default driver option is 'local'.

So if I do the following:

locker.driver('session').put('sessionKey1', 1);
locker.driver('session').put('sessionKey2', 2);
locker.driver('local').put('localKey1', 1);
locker.driver('local').put('localKey2', 2);

"sessionKey1" is set as a SessionStorage, but all three others are set as LocalStorage. The problem here is that "sessionKey2" should have been a SessionStorage not LocalStorage.

But if I change the order like this:

locker.driver('session').put('sessionKey1', 1);
locker.driver('local').put('localKey1', 1);
locker.driver('session').put('sessionKey2', 2);
locker.driver('local').put('localKey2', 2);

Everything work as expected.

In the midst of supporting private browsing on Safari (it doesn't allow webstorage), our product owner wanted a fallback for storage.

The solution we've provided was a temporary storage fallback, utilizing Angular's $cacheFactory and a decorator for angular-locker.

Here is a link to the Gist.

Would this be something you would want to provide in the case someone did not want to use Remy's polfill that utilizes cookies for a fallback? I realize that this is not as permanent as a cookie (refreshing will wipe the $cacheFactory values), but some people might want something Angular driven.

This is just a suggestion, any thoughts, comments, or criticisms would be highly appreciated as this is a code that is live on a production level website (tens of thousands of users a day).

It seems although we updated the bower package, it's not being picked up. I'm not sure if you need to run a bower command to reregister the package..

Are there any plans to add TTL features? jStorage, for example, has a TTL feature that's pretty useful. I'd make a pull request but, to be honest, not too confident in my ability to implement it cleanly

First off, great library and I would love to use it. The only problem is that I am using both Local and Session Storage in my project. I don't see a way to implement both using the instructions in the README and nothing is coming to mind for an easy way to do it.

Is there an easy way to do this that I am missing?

Sorry, I've opened the issue in the wrong project...

Anyway, nice job. I'm using locker for some weeks and I haven't found any issues.
I'm looking for some way to invalidate a cache key, that is actually stored in locker, and return the refreshed value, not just a promise.
Sorry for the confusion, and thanks for your great work!

I am using clean() to remove all values from a given namespace. However, if the namespace contains a dot within it's name (e.g. 'test.namespace'), on my Chrome the namespace is not cleared of its values afterwards.

The following test case should demonstrate the problem:

locker.driver('session').namespace('test.namespace').put('test', 'testvalue'); locker.driver('session').namespace('test.namespace').clean();

In Chrome, the resource view for the session storage returns the following afterwards:
'test.namespace.test' => 'testvalue'

Could it be that the dotted namespace screws up the cleaning algorithm?

The version used is 2.0.4

querying objects in locker should query both session, and local unless specified. If I say locker.has('user') I would expect that to return true if there is an object called 'user' in either the local or session storage.

Example use case:

app.controller('LoginCtrl', [
  '$scope', 'locker', function($scope, locker) {
    $scope.email = '';
    $scope.password = '';
    $scope.rememberMe = false;
    $scope.signIn = void 0;
    $scope.user = {
      email: '',
      password: ''
    };
    $scope.rememberMe = false;
    return $scope.signIn = function() {
      if ($scope.rememberMe) {
        return locker.driver('local').put('user', $scope.user);
      } else {
        return locker.driver('session').put('user', $scope.user);
      }
    };
  }
]);

Here I allow the user to define which locker they use. Specifying driver on locker.put makes sense, but now later through out my application I either need to create a $rootScope variable to tell me which locker to use or I need to do this all over the place:

if (locker.driver('local').has('user')) {
      return locker.driver('local').get('user');
    } else {
      return locker.get('user');
}

Ideally both locker.has and locker.get would query both lockers, unless I specifically say locker.driver('local').has or locker.driver('local').get

The version is angular-locker "2.0.4".
I put the value in storage, for example:

var storage = locker.driver('local');
storage.put('user', user);

After I close the browser and reopen, input the url to enter in page, I found the value is still in storage.
storage.has('user') == true

Could you please tell me how to set the configuration to make the value clear after I close the browser?

Thank you.