$ .ajax（）呼び出しでのCSSの変更を保存するには？

Question

.comment_formが送信されるたびに私のdivの高さを上げるための$ .ajax（）呼び出しがあります（ajaxコメント）。だからこれはうまく動作しますが、新しいheightを保存しないので、ページをリフレッシュすると元の高さに戻ります。

base.js

$('.comment_form').on('submit', function(e) { 
e.preventDefault(); 

var url = window.location.href.split('?')[0]; 

$.ajax({ 
    type: 'POST', 
    url: url, 
    data: { 
     text: $('.comment_text').val(), 
     csrfmiddlewaretoken: $("input[name='csrfmiddlewaretoken']").val(), 
}, 
    success: function(data) { 
     console.log(data.text_length); 
     if(data.text_length < 15) { 
      var increaseHeight = 30; 
     } 
     else { 
      increaseHeight = (data.text_length) + 20; 
     } 

     $('.commentsContainer').append("<div class='comment_div'><h3>" + data.username + "</h3><p>" + data.text + "</p></div>"); 
     $('.commentsContainer').css('height', '+=' + increaseHeight); 
    }, 

}); 

CSS

.commentsContainer { 
    height: 600px; 
} 

ジャンゴあなたはを使用することができます

... 

    ajax_comment = request.POST.get('text') 
    comment_length = len(str(ajax_comment)) 

    comments = Comments.objects.all() 

    if request.is_ajax(): 
     if comment.is_valid(): 
      comment = Comments.objects.create(comment_text=ajax_comment, author=str(request.user)) 
      comment.save() 
      username = str(request.user) 
      return JsonResponse({'text': ajax_comment, 'text_length': comment_length, 'username': username}) 

    return render(request, 'article.html', context) 

Answer 1

のviews.py：ここに私のjsがありますに高さを保存するには、まず次のような高さがあるかどうかチェックする必要があります。

success: function(data) { 
    console.log(data.text_length); 
    var ls = window.localStorage, // <---------Initialize here 
     increaseHeight; 
    if (data.text_length < 15) { 
    increaseHeight = ls.getItem('height') || 30; // <-----check here if there is any 
    } else { 
    increaseHeight = (data.text_length) + 20; 
    } 

    $('.commentsContainer').append("<div class='comment_div'><h3>" + data.username 
            + "</h3><p>" + data.text + "</p></div>"); 
    $('.commentsContainer').css('height', '+=' + increaseHeight); 
    ls.setItem('height', $('.commentsContainer').css('height')); //<-----store after adding. 
}