localForage is a fast and simple storage library for JavaScript.localForage uses localStorage in browsers with no IndexedDB or WebSQL.
localforage.setItem('key', 'value', function (err) {
// if err is non-null, we got an error
localforage.getItem('key', function (err, value) {
// if err is non-null, we got an error. otherwise, value is the value
});
}); :Framework Support
AngularJS
Angular 4 and up
Backbone
Ember
Vue
TypeScript:
import localForage from "localforage";
What’s new in Windows Forms in .NET 6.0 Preview 5
<!-- Required for routing --> <script src="~/node_modules/angular2/bundles/router.dev.js"></script>
<!DOCTYPE html>
<html>
<head>
<base href="/"> //same as before ...
import { ROUTER_PROVIDERS } from 'angular2/router';
//same as before ...
@Component({
//same as before …
providers: [
ProductService,
HTTP_PROVIDERS,
ROUTER_PROVIDERS
]
})
//same as before ... <div class='panel panel-primary'>
<div class='panel-heading'>
{{pageTitle}}
</div>
</div> import { Component } from 'angular2/core';
@Component({
templateUrl: 'app/products/product-detail.component.html'
})
export class ProductDetailComponent {
pageTitle: string = 'Product Detail';
} { path: '/products', name: 'Products', component: ProductListComponent }, //same as before …
import { ROUTER_PROVIDERS, RouteConfig } from 'angular2/router';
//same as before …
@Component({
//same as before …
})
@RouteConfig([
{ path: '/welcome', name: 'Welcome', component: WelcomeComponent, useAsDefault: true },
{ path: '/products', name: 'Products', component: ProductListComponent }
])
export class AppComponent {
pageTitle: string = "DNT AngularJS 2.0 APP";
} import { Component } from 'angular2/core';
@Component({
templateUrl: 'app/home/welcome.component.html'
})
export class WelcomeComponent {
public pageTitle: string = "Welcome";
} <div class="panel panel-primary">
<div class="panel-heading">
{{pageTitle}}
</div>
<div class="panel-body">
<h3 class="text-center">Default page</h3>
</div>
</div> import { WelcomeComponent } from './home/welcome.component'; @Component({
//same as before …
template: `
<div>
<nav class='navbar navbar-default'>
<div class='container-fluid'>
<a class='navbar-brand'>{{pageTitle}}</a>
<ul class='nav navbar-nav'>
<li><a [routerLink]="['Welcome']">Home</a></li>
<li><a [routerLink]="['Products']">Product List</a></li>
</ul>
</div>
</nav>
<div class='container'>
<router-outlet></router-outlet>
</div>
</div>
`,
//same as before …
}) import { ROUTER_PROVIDERS, RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router'; directives: [ROUTER_DIRECTIVES],
//same as before …
import { ProductDetailComponent } from './products/product-detail.component';
@Component({
//same as before …
})
@RouteConfig([
//same as before …
{ path: '/product/:id', name: 'ProductDetail', component: ProductDetailComponent }
])
//same as before … <td>{{ product.productName }}</td> <td>
<a [routerLink]="['ProductDetail', {id: product.productId}]">
{{product.productName}}
</a>
</td> import { Component, OnInit } from 'angular2/core';
import { ROUTER_DIRECTIVES } from 'angular2/router';
//same as before …
@Component({
//same as before …
directives: [StarComponent, ROUTER_DIRECTIVES]
}) 
import { Component } from 'angular2/core';
import { RouteParams } from 'angular2/router';
@Component({
templateUrl: 'app/products/product-detail.component.html'
})
export class ProductDetailComponent {
pageTitle: string = 'Product Detail';
constructor(private _routeParams: RouteParams) {
let id = +this._routeParams.get('id');
this.pageTitle += `: ${id}`;
}
} 
<div class='panel panel-primary'>
<div class='panel-heading'>
{{pageTitle}}
</div>
<div class='panel-footer'>
<a class='btn btn-default' (click)='onBack()' style='width:80px'>
<i class='glyphicon glyphicon-chevron-left'></i> Back
</a>
</div>
</div> 
import { Component } from 'angular2/core';
import { RouteParams, Router } from 'angular2/router';
@Component({
templateUrl: 'app/products/product-detail.component.html'
})
export class ProductDetailComponent {
pageTitle: string = 'Product Detail';
constructor(private _routeParams: RouteParams, private _router: Router) {
let id = +this._routeParams.get('id');
this.pageTitle += `: ${id}`;
}
onBack(): void {
this._router.navigate(['Products']);
}
} public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional },
constraints: new { controller = "Home" } // for catch all to work, Home|About|SomeName
);
// Route override to work with Angularjs and HTML5 routing
routes.MapRoute(
name: "NotFound",
url: "{*catchall}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
} 
ng-template in Angular 
public class Product
{
public int Id { set; get; }
public DateTime AddDate { set; get; }
public string Name { set; get; }
public decimal Price { set; get; }
} 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" />
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<link href="~/Content/PersianDatePicker.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
@RenderBody()
</div>
<script src="~/Scripts/jquery-1.7.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.11.min.js"></script>
<script src="~/Scripts/i18n/grid.locale-fa.js"></script>
<script src="~/Scripts/jquery.jqGrid.min.js"></script>
<script src="~/Scripts/PersianDatePicker.js"></script>
<script src="~/Scripts/jquery.price_format.2.0.js"></script>
@RenderSection("Scripts", required: false)
</body>
</html> colModel: [
{
name: 'Name', index: 'Name', align: 'right', width: 100,
editable: true, edittype: 'text',
editoptions: {
maxlength: 40,
dataInit: function (elem) {
// http://jqueryui.com/autocomplete/
$(elem).autocomplete({
source: '@Url.Action("GetProductNames","Home")',
minLength: 2,
select: function (event, ui) {
$(elem).val(ui.item.value);
$(elem).trigger('change');
}
});
}
},
editrules: {
required: true
}
}
], public ActionResult GetProductNames(string term)
{
var list = ProductDataSource.LatestProducts
.Where(x => x.Name.StartsWith(term))
.Select(x => x.Name)
.Take(10)
.ToArray();
return Json(list, JsonRequestBehavior.AllowGet);
} colModel: [
{
name: 'AddDate', index: 'AddDate', align: 'center', width: 100,
editable: true, edittype: 'text',
editoptions: {
maxlength: 10,
// https://www.dntips.ir/post/1382
onclick: "PersianDatePicker.Show(this,'@today');"
},
editrules: {
required: true
}
}
], @{
ViewBag.Title = "Index";
var today = DateTime.Now.ToPersianDate();
} colModel: [
{
name: 'Price', index: 'Price', align: 'center', width: 100,
formatter: 'currency',
formatoptions:
{
decimalSeparator: '.',
thousandsSeparator: ',',
decimalPlaces: 2,
prefix: '$'
},
editable: true, edittype: 'text',
editoptions: {
dir: 'ltr',
dataInit: function (elem) {
// http://jquerypriceformat.com/
$(elem).priceFormat({
prefix: '',
thousandsSeparator: ',',
clearPrefix: true,
centsSeparator: '',
centsLimit: 0
});
}
},
editrules: {
required: true,
minValue: 0
}
}
], using System;
using System.Globalization;
using System.Threading;
using System.Web.Mvc;
namespace jqGrid05.CustomModelBinders
{
/// <summary>
/// How to register it in the Application_Start method of Global.asax.cs
/// ModelBinders.Binders.Add(typeof(decimal), new DecimalBinder());
/// </summary>
public class DecimalBinder : DefaultModelBinder
{
public override object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
{
if (bindingContext.ModelType == typeof(decimal) || bindingContext.ModelType == typeof(decimal?))
{
return bindDecimal(bindingContext);
}
return base.BindModel(controllerContext, bindingContext);
}
private static object bindDecimal(ModelBindingContext bindingContext)
{
var valueProviderResult = bindingContext.ValueProvider.GetValue(bindingContext.ModelName);
if (valueProviderResult == null)
return null;
bindingContext.ModelState.SetModelValue(bindingContext.ModelName, valueProviderResult);
decimal value;
var valueAsString = valueProviderResult.AttemptedValue == null ?
null : valueProviderResult.AttemptedValue.Trim();
if (string.IsNullOrEmpty(valueAsString))
return null;
if (!decimal.TryParse(valueAsString, NumberStyles.Any, Thread.CurrentThread.CurrentCulture, out value))
{
const string error ="عدد وارد شده معتبر نیست";
var ex = new InvalidOperationException(error, new Exception(error, new FormatException(error)));
bindingContext.ModelState.AddModelError(bindingContext.ModelName, ex);
return null;
}
return value;
}
}
} using System;
using System.Web.Mvc;
using System.Web.Routing;
using jqGrid05.CustomModelBinders;
namespace jqGrid05
{
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
RouteConfig.RegisterRoutes(RouteTable.Routes);
ModelBinders.Binders.Add(typeof(DateTime), new PersianDateModelBinder());
ModelBinders.Binders.Add(typeof(decimal), new DecimalBinder());
}
}
}