how to create a global variable for every entrance to the website?

Question

I have global array that works just fine and stores the URL's of the chosen images from the user after i click submit in the form.

the problem is when i want to submit another form, the global array will still have the URL's of the previous submission.

what i want to do is to create an array for every user to store his URL's, one he click submit, the array will be dropped or deleted. so if there were multiple users using the same function, every one of them will have his own array to store his URL's

How do i do this?

this is what i have tried but when i click on submit on the form page, nothing happens

first, this is the method that returns the url of the chosen image by the user, the method exists in both folder (both/file.js)

storeUrlInDatabaseSS: function( url ) {
    check( url, String );
    Modules.both.checkUrlValidity( url );

    try {
      return url;
     } catch( exception ) {
      return exception;
    }
  }

then i created the session variables in the client side (client/file.js)

Session.set("screenshots", []);
Session.set("i", 0);

var screenshots = Session.get("screenshots");
var i = Session.get("i");

and here i store the url in the array

let _addUrlToDatabaseSS = ( url ) => {
  screenshots[i++] = url;
  Session.set("screenshots", screenshots);
};

and am using Meteor Collection Hook Package

and i added these two lines of code which should be excited after the user press submit, they exist inside "client/files.js" directory

Products.before.insert(function (userId, doc) {
  doc.screenShots = Session.get("screenshots");
});

now whenever i click submit nothing happens, i think the problem is because nothing is actually stored inside the screenShots attribute in the collection here

  screenShots: {
    type: [String]
  },

when i set the screenShots attribute to an empty array by default like the code below, the submit button works

  screenShots: {
    type: [String],
    autoValue: function() {
      return [];
    }
  },

I tried to use the other way of using AutoForm.hooks

AutoForm.hooks({
    submitPostForm: {
        before: {
            insert: function(doc) {
                doc.$set.screenShots = Session.get("screenshots");
            }
        }
    }
});

the is my form in the .html file

{{> quickForm collection="Products" id="submitPostForm"
  type="method" meteormethod="submitPost" omitFields="createdAt, previewImage, screenShots, sourceCode, userID"}}

and this is the method triggered once the user submit the form, it exist in the server side.

submitPost: function (app) {
    // Console.log('new App:', app);
    check(app, {
        title: String,
        description: String,
        category: String,
        price: Number
    });
    Products.insert(app);
}

for some reason my before hook isn't working and i can't see why! what am i doing wrong here?

Answer 1

One of the ways to create a global array per user is to use Session. This way it is also possible to persist the data across the app (only client-side).

Simple way to use Session is thus:

1. Create an array in Session called url_list:

   Session.set("url_list", []);

2. Retrieve the array from Session:

   var url_list = Session.get("url_list");

3. Make changes to url_list:

   url_list.push(someData);

4. Store url_list in the Session again:

   Session.set("url_list", url_list);

Note: Session can only be used on client-side and all related code should be on the client-side.

More about Session.

PERSISTING DATA TO SERVER-SIDE:

The best way to persist the url_list to the server, would be to insert a new document into the database collection containing the Session data.

insertToDB = function() {

    var url_list = Session.get('url_list');
    Products.insert({
        'url_list': url_list
    });
    Session.set('url_list', []); // To empty the client-side list

}