Armazenamento local HTML5 para realizar a função de carrinho de compras

Em casa, acompanhe a licença de maternidade, entediante, observe seu projeto anterior e de repente descobriu que os carrinhos de compras que escrevi antes foram implementados com bancos de dados. eficiência. De repente, se você pode usar o armazenamento local HTML5, aumentará bastante a eficiência do programa. Obviamente, o armazenamento local HTML5 envolve a compatibilidade de cada navegador e o tamanho (NKB) dos dados de armazenamento. O que precisa ser explicado aqui é: se você fizer um pequeno projeto de micro, poderá tentar usar o procedimento de armazenamento local HTML5 para obter o carrinho de compras!

Esta seção discute as funções do armazenamento local HTML5 para realizar as funções dos carros comerciais!

Deve -se explicar: a parte anterior do blog de outras pessoas: uso de armazenamento local HTML5, esta seção usa o conhecimento da seção anterior para realizar o carrinho de compras!

Em uma tabela de produtos, o ID do produto é diferente.

Exemplos específicos são os seguintes:

Quando você clica em 'ingressar no carrinho de compras ", o código de execução é o seguinte:

 var pid = $ (#hidpid). , Pcolor: cor}; == KeyName) {localStorage.RemoveItem (KeyName);}} LocalStorage.SetItem (BAT+PID, BatString);

Sob Explicação Geral:

PID: ID da mercadoria

Cor: cor do produto

Num2: Número de mercadorias

Bat: JSON Object

BatString: a string convertida no objeto JSON

Para o loop: Traversed todo o armazenamento local atual. antigos.

Finalmente, o armazenamento dinâmico, a dinâmica assim chamada, é a combinação de valores de chave de armazenamento local e IDs de produto. Em outras palavras, produtos diferentes serão armazenados como diferentes valores -chave. Finalmente, precisamos apenas analisar essa string n diferente, e teremos um carrinho de compras completo!

Hee hee, simples!

Então, como você pode atravessar essa string n json? do seguinte modo:

Página de carga de carros de compras:

 $ (function () {for (var i = 0; i <localStorage.Length; i ++) {var localValue = localStorage.getItem (localStorage.key (i)); var key = localStorage. key (i); se (chave! + PID + Quantidade do produto: + num + cor do produto: + cor);}}});

Explicação geral:

Ele atravessa todo o armazenamento local e requer que o valor da chave contenha o corte do sublinhado de morcego do armazenamento local diferente do BAT. <Evite armazenamento local conflitante com outros sistemas, portanto a solicitação deve conter o morcego>

Converter string json em objeto JSON

E insira o ID do produto, o número de produtos, a cor do produto.

Com o ID do produto, a cor do produto e o número de produtos, podemos usar JS ou Ajax para carregar os carrinhos de compras que armazenamos localmente. O método de carregamento específico é o seguinte:

$.ajax(...........)

ou:

JS costurando html

Aqui: nenhuma demonstração.

OK, a partir de agora, todo o HTML5 local de armazenamento também está concluído.

Continue a melhorar este blog

É mencionado acima que você precisa usar o Ajax ou JS Stitching para concluir a função de carregamento.

O código JS é o seguinte:

 $ (function () {varility = new Array (); para (var i = 0; i <localStorage.Length; i ++) {var key = localStorage.key (i); var localValue = localStorage. getItem (chave) ; coool = obj .pcolor; = {Carry: Carry}; dados) {var arystr = new Array (); <pan> (total ' + arystr [1] +', sem frete) </span> ')});});

Parte do controlador:

 [Httppost] public string getcarinfo (dicionário <string, string> [] carary) {usercarmodel Model = new Usercarmodel (); ] [] Carry) {UserCarmodel Model = new Usercarmodel ();

Seção modelo

 Public string getcarinfo (dicionário <string, string> [] carary, int i = 0) {System.text.stringbuilder sb = new system.textbuilder (); Carregue o carrinho de compras se (Carry! string pcolor = item [pcolor]; '> <Div class =' ​​thumb '> <img src =' + picpath + @ ' /> < /div> Classificação pequena> colorida: + pcolor + @</mall> <pan> ￥ + convert.todouble (productmol.shopprice) .ToString (0,00) + @</span> <div class = 'ctrl-div'> <classe div. = 'Jian'> </div> <div class = 'num'> + num + @</div> <div class = 'jia'> </div> </div> </div > </li>);} sb.append (</ul>);} else {sb.append (<ul> <li onclick = 'gobuy2 ()'> li> <br/> </ul>); }} Else {// Calcule a quantidade total e o número de produtos se (carary! ProductMol = bll.getModel (convert.toxt32 (PID)); Carry.Length);} Retorne sb.toString ();}

O mapa de efeitos é o seguinte:

O acima é todo o conteúdo deste artigo.