{"id":34696,"date":"2017-12-08T03:01:25","date_gmt":"2017-12-07T17:01:25","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=34696"},"modified":"2017-12-14T20:46:46","modified_gmt":"2017-12-14T10:46:46","slug":"visual-studio-code-local-storage-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/visual-studio-code-local-storage-primer-tutorial\/","title":{"rendered":"Visual Studio Code Local Storage Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ASPNet\/Hits\/hit_count.jpg\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Visual Studio Code Local Storage Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/ASPNet\/Hits\/hit_count.jpg\" title=\"Visual Studio Code Local Storage Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Visual Studio Code Local Storage Primer Tutorial<\/p><\/div>\n<p>The previous <a title='Visual Studio Code on Mac OS X for .NET Core and C# Tutorial' href='#vscmosxnetcct'>Visual Studio Code on Mac OS X for .NET Core and C# Tutorial<\/a> talking about the Visual Studio Code IDE and <a target=_blank title='HTML\/Javascript Hit Counter Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-hit-counter-primer-tutorial\/'>HTML\/Javascript Hit Counter Primer Tutorial<\/a> talking about the HTML5-introduced local storage concept (or what W3Schools calls <a target=_blank title='HTML Web Storage information from w3schools' href='https:\/\/www.w3schools.com\/html\/html5_webstorage.asp'>&#8220;HTML Web Storage&#8221;<\/a>), represents an important alternative temporary database solution for your web applications.  Today, we touch on that idea again, but this time in ASP.NET code arranged with the Visual Studio Code (IDE) on a MacBook Pro.  How does the &#8220;.NET&#8221; in ASP.NET work with Mac OS X?  Well, it doesn&#8217;t exactly, but it simulates enough to term the environment &#8220;.NET Core&#8221;, and you can code and debug and test on a Mac ASP.NET code via this great Microsoft IDE.  Cute, huh?!<\/p>\n<p>Let&#8217;s go over this &#8220;HTML Web Storage&#8221; concept from HTML5, in W3School&#8217;s words, thanks &#8230;<\/p>\n<blockquote cite='https:\/\/www.w3schools.com\/html\/html5_webstorage.asp'><p>\nWith web storage, web applications can store data locally within the user&#8217;s browser.<br \/>\n<br \/>\nBefore HTML5, application data had to be stored in cookies, included in every server request. Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance.<br \/>\n<br \/>\nUnlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.<br \/>\n<br \/>\nWeb storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.\n<\/p><\/blockquote>\n<p>The bulk of the logic for our webpage hit counter &#8230;<\/p>\n<blockquote cite='https:\/\/www.w3schools.com\/html\/html5_webstorage.asp'><p>\nwindow.localStorage &#8211; stores data with no expiration date\n<\/p><\/blockquote>\n<p> &#8230; lies with our Visual Studio Code project&#8217;s <a target=_blank title='app.js' href='http:\/\/www.rjmprogramming.com.au\/ASPNet\/Hits\/app.js-GETME'>app.js<\/a> which pieces together the HTML and Javascript of the webpage, that when Debugged, can display the results on HTTP:\/\/localhost:1337 as you can see with today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ASPNet\/Hits\/hit_count.jpg\" title=\"Click picture\">tutorial picture<\/a>.<\/p>\n<p>Here are a couple of the other project code file &#8230;<\/p>\n<ul>\n<li><a target=_blank title=\"package.json\" href=\"http:\/\/www.rjmprogramming.com.au\/ASPNet\/Hits\/package.json-GETME\">package.json<\/a><\/li>\n<li><a target=_blank title=\"Program.cs\" href=\"http:\/\/www.rjmprogramming.com.au\/ASPNet\/Hits\/Program.cs-GETME\">Program.cs<\/a><\/li>\n<\/ul>\n<hr>\n<p id='vscmosxnetcct'>Previous relevant <a target=_blank title='Visual Studio Code on Mac OS X for .NET Core and C# Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/visual-studio-code-on-mac-os-x-for-.net-core-and-c#-tutorial\/'>Visual Studio Code on Mac OS X for .NET Core and C# Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/VisualStudioCode\/index.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Visual Studio Code on Mac OS X for .NET Core and C# Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/VisualStudioCode\/visual_studio_code_mac_os_x_asp_net_localhost_50000_c_hash.jpg\" title=\"Visual Studio Code on Mac OS X for .NET Core and C# Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Visual Studio Code on Mac OS X for .NET Core and C# Tutorial<\/p><\/div>\n<p>We left off <a title='Visual Studio Express 2015 Install and Early Days Tutorial' href='#vse2oaedt'>Visual Studio Express 2015 Install and Early Days Tutorial<\/a> as shown below promising &#8230;<\/p>\n<blockquote><p>\nAlong the way I noticed the term &#8220;Mac OS X&#8221; flash past and you can rest assured I&#8217;ll be following up that lead\n<\/p><\/blockquote>\n<p> &#8230; and today, as with WordPress 4.1.1&#8217;s <a target=_blank title='Visual Studio Code on Mac OS X for .NET Core and C# Tutorial' href='visual-studio-code-on-mac-os-x-for-net-core-and-c-tutorial'>Visual Studio Code on Mac OS X for .NET Core and C# Tutorial<\/a>, we follow up on that.  In my mind I&#8217;d always associated the five below as sacrosanct, with respect to each other &#8230;<\/p>\n<ul>\n<li>Windows<\/li>\n<li>Visual Studio<\/li>\n<li>.Net Framework<\/li>\n<li>ASP.Net or IIS<\/li>\n<li>C#<\/li>\n<\/ul>\n<p> &#8230; but my mind&#8217;s world got &#8220;rocked&#8221; by delving into <a target=_blank title='Download for Visual Studio Code (for Mac OS X today)' href='https:\/\/code.visualstudio.com\/download'>Visual Studio<\/a> Express 2015 and noticing that &#8220;Mac OS X&#8221; reference flash by so that today we involve &#8230;<\/p>\n<ul>\n<li>Mac OS X (Yosemite)<\/li>\n<li><a target=_blank title='Download for Visual Studio Code (for Mac OS X today)' href='https:\/\/code.visualstudio.com\/download'>Visual Studio Code<\/a><\/li>\n<li><a target=_blank title='.NET Core install for Mac OS X' href='https:\/\/www.microsoft.com\/net\/core#macos'>.NET Core<\/a><\/li>\n<li><a target=_blank title='node.js and npm installers, as required' href='https:\/\/nodejs.org\/en\/'>node.js<\/a> (open-source, cross-platform runtime environment for developing server-side Web applications)<\/li>\n<li><a target=_blank title='Visual Studio Code C# extension' href='https:\/\/marketplace.visualstudio.com\/items?itemName=ms-vscode.csharp'>C#<\/a><\/li>\n<li><a target=_blank title='npm package manager' href='https:\/\/www.npmjs.com\/'>npm<\/a> (package manager)<\/li>\n<\/ul>\n<p> &#8230; to create a Hello World web application on http:\/\/localhost:50000 on a MacBook Pro laptop.  This new local web server connection we feature in the list at <a target=_blank title=\"Cassini++ WebServer Primer Tutorial\" href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/cassini-webserver-primer-tutorial\">Cassini++ WebServer Primer Tutorial<\/a>.<\/p>\n<p>Now we&#8217;re not saying that we didn&#8217;t take quite a few sideways steps getting this going, because we did, and so, today, our slideshow presentation will be a <a target=_blank title='Gifpal landing page for animated GIF creation ... thanks' href='http:\/\/gifpal.com'>Gifpal<\/a> animated GIF &#8220;stream of consciousness&#8221; presentation giving you just the gist which you can view <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/VisualStudioCode\/index.html\" title='Click picture'>here<\/a>, and some programming code highlights &#8230;<\/p>\n<ul>\n<li><a target=_blank title=\"package.json\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/VisualStudioCode\/package.json-GETME\">package.json<\/a> of Hello World project incorporating C# code<\/li>\n<li><a target=_blank title=\"project.json\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/VisualStudioCode\/project.json-GETME\">project.json<\/a><\/li>\n<li><a target=_blank title=\"Program.cs\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/VisualStudioCode\/Program.cs-GETME\">Program.cs<\/a><\/li>\n<li><a target=_blank title=\"Startup.cs\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/VisualStudioCode\/Startup.cs-GETME\">Startup.cs<\/a><\/li>\n<\/ul>\n<ul>\n<li><a target=_blank title=\"package.json\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/VisualStudioCode\/package.json_GETME\">package.json<\/a> of earlier try of Hello World project not incorporating C# code<\/li>\n<li><a target=_blank title=\"app.js\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/VisualStudioCode\/app.js_GETME\">app.js<\/a><\/li>\n<\/ul>\n<p> &#8230; and a few major links below that if followed should get you to where you want to go should you, too, be interested in this topic &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Google search good introductory advice' href='https:\/\/www.google.com.au\/?client=firefox-b-ab#q=visual+studio+code+for+mac+os+x&#038;gfe_rd=cr'>Google search good introductory advice<\/a><\/li>\n<li><a target=_blank title='Download for Visual Studio Code (for Mac OS X today)' href='https:\/\/code.visualstudio.com\/download'>Download for Visual Studio Code<\/a><\/li>\n<li><a target=_blank title='Great getting started tips for Visual Studio Code' href='https:\/\/code.visualstudio.com\/docs\/b?utm_expid=101350005-20.jAsCkEFcTeqvtdr0STCN9g.1&#038;start=true'>Great getting started tips for Visual Studio Code<\/a><\/li>\n<li><a target=_blank title='node.js and npm installers, as required' href='https:\/\/nodejs.org\/en\/'>node.js and npm install<\/a><\/li>\n<li><a target=_blank title='.NET Core install for Mac OS X' href='https:\/\/www.microsoft.com\/net\/core#macos'>.NET Core install for Mac OS X plus great Hello World project ideas<\/a><\/li>\n<\/ul>\n<p>We hope this is of some good food for thought for you, as it was for us.<\/p>\n<hr>\n<p id='vse2oaedt'>Previous relevant <a target=_blank title='Visual Studio Express 2015 Install and Early Days Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/visual-studio-express-2015-install-and-early-days-tutorial\/'>Visual Studio Express 2015 Install and Early Days Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/VB.NET\/Example_of_math_expr1\/visual_studio_express_2015.gif\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Visual Studio Express 2015 Install and Early Days Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/VB.NET\/Example_of_math_expr1\/visual_studio_express_2015.png\" title=\"Visual Studio Express 2015 Install and Early Days Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Visual Studio Express 2015 Install and Early Days Tutorial<\/p><\/div>\n<p>Today we&#8217;re creating a <a target=_blank title='Visual Studio landing page by Microsoft' href='https:\/\/www.visualstudio.com\/'>Visual Studio<\/a> Express 2015 VB.Net Project for an Online Project called &#8220;Example of math variables and if statements&#8221; as an entry level project you could quickly try as your first Visual Studio 2015 Express project.<\/p>\n<p>We say &#8220;first&#8221; because even though we&#8217;ve created more complex <a target=_blank title='Visual Studio blog postings here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/visual-studio'>Visual Studio<\/a> projects in the past, we&#8217;ve just installed a new Visual Studio version called Visual Studio Express 2015.<\/p>\n<p>We did the install of Visual Studio Express 2015 (using .NET Framework 4.5.2) onto Windows 10 and had no issues, as long as you have more than 8 gB of spare hard disk space. The installs for Visual Studio keep on getting easier to work and visually more pleasing.<\/p>\n<p>Once up and running the VB.Net major piece of code for this Windows Desktop application called &#8220;Example of math variables and if statements&#8221; you could call <a target=_blank title='Form1.vb' href='http:\/\/www.rjmprogramming.com.au\/VB.NET\/Example_of_math_expr1\/Form1.vb_GETME'>Form1.vb<\/a> fits in to the steps to create the project that went, for us &#8230;<\/p>\n<ol>\n<li>Opened Visual Studio Express 2015 in Windows 10 via Windows icon at bottom left -&gt; All Apps -&gt; (look in the V&#8217;s for) Visual Studio 2015 (with the purple logo)<\/li>\n<li>File -&gt; New -&gt; Project&#8230;<\/li>\n<li>Online<\/li>\n<li>Samples -&gt; Visual Basic -&gt; Web -&gt; Example of math expressions, and if statements<\/li>\n<li>Build -&gt; Build Solution<\/li>\n<li>Debug -&gt; Start without debugging<\/li>\n<\/ol>\n<p>So this project will create an executable in &#8220;C:\\Users\\[YourUsername]\\Documents\\Visual Studio 2015\\Projects\\Example of math, variables, and if statements\\bin\\Debug\\Example of math variables and if statements.exe&#8221; (believe it or not &#8230; was gobsmacked, myself, at the commas in a directory name?!) that could be double clicked as a way to execute independent of the Visual Studio Express 2015 <a target=_blank rirle='Integrated Development Environment information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Integrated_development_environment'>IDE<\/a>, or the other way to run it is to use the IDE as described in the last two steps above.<\/p>\n<p>We like animated GIFs for a &#8220;stream of consciousness&#8221; view, as we&#8217;ve composed one (using our previously written web application from <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-via-php-writing-php-primer-tutorial\/' title='Animated GIF via PHP Writing PHP Primer Tutorial'>Animated GIF via PHP Writing PHP Primer Tutorial<\/a>) to cover highlights of &#8230;<\/p>\n<ul>\n<li>Visual Studio Express 2015 install on Windows 10<\/li>\n<li>&#8220;C:\\Users\\[YourUsername]\\Documents\\Visual Studio 2015\\Projects\\Example of math, variables, and if statements\\bin\\Debug\\Example of math variables and if statements.exe&#8221; desktop Windows form application creation via cloning of an Online VB.Net project<\/li>\n<\/ul>\n<p>We hope you like <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/VB.NET\/Example_of_math_expr1\/visual_studio_express_2015.gif\" title=\"Click picture\">it<\/a>?!<\/p>\n<p>Maybe this is the introduction you need to explore the massive world that Visual Studio (as an IDE for desktop or web or mobile application software) is.  Along the way I noticed the term &#8220;Mac OS X&#8221; flash past and you can rest assured I&#8217;ll be following up that lead &#8230; <font size=1>(<a target=_blank title='Power and Lead Windows Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/power-and-lead-windows-primer-tutorial\/'>another meaning<\/a>!)<\/font> &#8230; over time.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d23803' onclick='var dv=document.getElementById(\"d23803\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/visual-studio\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d23803' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d23818' onclick='var dv=document.getElementById(\"d23818\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/asp.net\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d23818' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d34696' onclick='var dv=document.getElementById(\"d34696\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/html5\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34696' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The previous Visual Studio Code on Mac OS X for .NET Core and C# Tutorial talking about the Visual Studio Code IDE and HTML\/Javascript Hit Counter Primer Tutorial talking about the HTML5-introduced local storage concept (or what W3Schools calls &#8220;HTML &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/visual-studio-code-local-storage-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37,39],"tags":[1960,106,305,567,576,578,585,652,2408,2410,2415,725,782,997,1319,1959,2409],"class_list":["post-34696","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","category-visual-studio","tag-net-core","tag-asp-net","tag-debug","tag-hit-counter","tag-html","tag-html5","tag-ide","tag-javascript","tag-local-storage","tag-localhost","tag-localstorage","tag-mac-os-x","tag-microsoft","tag-programming","tag-tutorial","tag-visual-studio-code","tag-web-storage"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34696"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=34696"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34696\/revisions"}],"predecessor-version":[{"id":34707,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34696\/revisions\/34707"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=34696"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=34696"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=34696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}