This directive is intended to support the use of cookies. The The use of cookies can be activated by calling up 'index.html'. The user is then asked to accept the corresponding cookies. The number and description of the cookie types is determined by the JSON file 'paramsApp.json' set. In this example, 3 cookies are provided and can be used immediately.
If cookies are activated, you can read using the functions provided and writing cookies the desired functionality with your own cookies will be realized. The following HTML code allows the use of cookies in the web application be activated in the 'index.html'. <ea-cookies data-cookies-used="true"></ea-cookies> The following functions are defined for use in your own application: cookieGet(key); // key is the Name of the Cookie cookiePut(key, o); // key is the Name of the Cookie, o is the value (can be an object) cookieGetAll(); cookieRemove(key); // key is the Name of the Cookie For this demo I created an additional directive 'eaCookiesDemo', which provides all the functions required for this demo. The call is done through an additional attribute in the 'eaCookies' directive. <ea-cookies data-cookies-used="false" ea-cookies-demo="cookiesDemo"></ea-cookies> This directive overrides the disabled cookie functionality (see 'index.html') and turns it on. The cookies written during the demo are protected by the Delete user again. The red button 'Turn off demo' is available for this purpose. Otherwise the cookies remain in the system.
The following JSON file contains the current version of the Cookie banners set. This can be changed in the demo and used as your own Cookies are stored. {"entries": { "baseDoman": "https://www.aleksander.de", "startFile" : "indexDrt.html", "vdoNo" : "Your browser can not play this video.", "cookies" : { "title": "Your cookie settings", "body": "The cookies are used to ensure the functionality of the website. In addition, analysis cookies and marketing cookies are used to optimize the website for users and to provide personalized advertising.", "cookiesDemo": false, "types": [{ "id": "ess", "def": "true", "dis": "true", "title": "Essentiell", "body": "Essential cookies are necessary for the web application to function."}, { "id": "ana", "def": "false", "dis": "false", "title": "Analysis", "body": "Analysis cookies are used to evaluate user behavior. With their help, the application can be made more user-friendly. For example, search aids or cross-references can be added to the application if users access certain pages disproportionately often."}, { "id": "ext", "def": "false", "dis": "false", "title": "Marketing", "body": "External cookies are created when you use the buttons from Facebook, Instagram, etc. used. They set cookies to provide personalized advertising." } ], "links": [{ "title": "imprint", "key": "imp", "url": "html/impressum.html"}, { "title": "Datenschutzerklärung", "key": "ds", "url": "html/Datenschutz2.html"} ] } } }
The demo can be started and ended using the following buttons. For illustration, the active cookies are green and the deactivated or deleted cookies highlighted in red.
Info for Cookies
cookiesDemo
WebInfo_Cookie_ess
WebInfo_Cookie_ana
WebInfo_Cookie_ext

This is an example of the further use of cookies for programmatic purposes. The texts displayed on the cookie banner page can be changed as desired These changes are then saved as an additional cookie 'cookiesParam' stored and used again when the program is started again.

Probier es aus!

The following test scenario is recommended for the demo:
  • Press the “Turn on/Edit” button
  • In the window that appears, the cookies must be selected and confirmed
  • The offered description texts of the CookieBanner can be changed as desired
  • Press the “Save as cookie” button
  • Restart the web application. (Refresh in the browser e.g. with F5)
  • To check, press the “Turn on/Edit” button again
  • In addition, the cookies can now be controlled in the browser in the DevTool (see button “Info for Cookies”)
When the application is restarted, all internal parameters are discarded and the Application is started again in its original state. However, the cookie is 'cookiesDemo' = true will be the current setting for use of cookies (false) from the 'index.html' overrides the cookies read and used to change the display of the cookie banner.

Cookie Banner

cookiesParam

Types of cookies