The localstorage browser stores locally to limit the number of forms submitted when tourists do not log in.

1. First , Find out what is localStorage

localStorage yes JavaScript You can create a locally stored in the browser  name/value Commonly known as key value pair , Follow Redis Storage is the same , It can only store string types .

2. Take a look Jq Yes localStorage Creation and storage of . With native Js The method is different .

var x = 9999;

var y = 1000;
// Here I first splice a string that defines a random number .  Bear in mind localStorage  You can only store strings .            
var rand = 'zhai'+ parseInt(Math.random() * (x - y + 1) + y);
                  
// When it's defined , I began to deposit  Set Method deposit ,“dat” Is the key name I defined ,rand It's worth it . Key value pair 
localStorage.setItem("dat", rand);

//get Just take it out , When I pick it up , Just pass in the key name .
var key = localStorage.getItem("dat");

3.localStorage Characteristics of

localStorage For long-term preservation of data across the site , Saved data has no expiration time , Until you delete it manually .

such as ： open www.baidu.com This website , Any window extended from this website can be accessed . Data sharing .

localStorage Properties are read-only .

4. Let's see , After storage , In addition to using get obtain , How to view and clean in the browser .

   4-1 see

  4-2 Delete / clear , Select the corresponding website , Clean up the corresponding localStorage. This has existed for a long time , Unless the browser window is closed , Or you can manually clear it here . Otherwise, it will be kept forever . Of course, you can also use code in jq Inside cleaning

5. The extension of this use is very extensive , It also plays a great role . Here is the basis localStorage To be a person who doesn't log in / Visitors to limit the number of times their forms are submitted

6. Let's first look at the front end js part   First judge , How many times did the user submit the form

var x = 9999; // Maximum random number 
                  
var y = 1000; // Minimum random number 
                  
var rand = 'zhai'+ parseInt(Math.random() * (x - y + 1) + y); // Splice one at the front  zhai
                  
var key = localStorage.getItem("dat"); // First get , See if it exists 
                  
var get_key = '';// Define an empty variable , This is to use ajax For back-end query 
                  
if(key != null){ 
 // Judge , If there is , That's not the first time to submit , A key value pair has been created for the user , And already stored 
 // Then we can assign the value directly , No need to make new ones , Pass it to the back end for query comparison .                    
 get_key = key;
                  
}else{
 // If it doesn't exist , That was the first time the form was submitted , Then you need to create a new key value pair for the user , Store in browser                      
localStorage.setItem("dat", rand);
 // Then take it out , Assign a value to a variable , Pass to the back end for storage .                     
get_key = localStorage.getItem("dat");
                  
}

 7. Ajax Submit to the backend for query and saving

 

$.ajax({
    // Bring the queried data                 
    url: 'index.php?route=product/product/write&product_id=1&key='+get_key+'',
    // submission post                      
    type: 'post',
    // data type ,json                  
    dataType: 'json',
    //data Is all the data in my form                   
    data: $("#form-review").serialize(),
                      
    success: function(json) {
                                                      
    if (json['error']) {
                             
        layer.msg(json['error']);
                          
    }
                          
    if (json['success']) {
                              
        layer.msg(json['success']);                              
        // After the submission is complete , Refresh the page                       
        window.location.reload();
                          
    }

                      
}
                  
});

8. Back end PHP Handle

public function write (){
    // obtain JQ Generated local file contents 
    $return = $this->model_catalog_review->jqkey($this->request->get['key']);
    //model Layer returned $return Boolean value 
    if($return){
        //true 
        // First submission , Directly add the form data to the database , I won't write here    
    }else{
        //false
        // Express , It has just been submitted , Please wait five minutes to submit again .
        $json['error'] = $this->language->get(' sorry , You submit too often , Please take a five minute break and submit again ');
    }
}

9. Look again. model Processing layer

 

class ModelCatalogReview extends Model {
    public function jqkey($key){
        // receive C Value passed from layer 
	    $data_key['jq_key'] = $key;
        // Query in the table with values 
	    $find = $this->ocxdm->table('jqkey')->where($data_key)->find();
        // If it's empty , We can't find it , That was the first submission , Generate a timestamp , Exists in the table , towards C Layer return  true, Indicates that you can submit 
	    if(empty($find)){
	        $add['jq_key'] = $key;
	        $add['add_time'] = time();
            $add = $this->ocxdm->table('jqkey')->add($add);
            return true;
        }else{
            // If it's not empty , That's what I submitted before 
            // Take out the last time he submitted 
            $min_time = date("Y-m-d H:i:s",$find['add_time']);
            // Now the current time 
            $max_time = date("Y-m-d H:i:s",time());
            // Two times minus each other equals seconds 
            $res = strtotime($max_time)-strtotime($min_time);
            // Divided by 60 Just minutes 
            $res = $res/60;
            // If two times are more than five minutes , You can submit , And modify the submission time here 
            if($res > 5){
                $id['id'] = $find['id'];
                $add_time['add_time'] = time();
                $update = $this->ocxdm->table('jqkey')->where($id)->update($add_time);
                return true;
            }else{
                // If it is less than five minutes, it is not allowed to submit 
                return false;
            }
        }
    }


}