1.首先，了解一下什么是localStorage

localStorage 是JavaScript可以在浏览器创建一个本地储存的 name/value 俗称键值对，跟Redis储存一样，只是它只可以存储字符串类型。

2.来看下Jq对localStorage的创建和储存。与原生Js方法不一样。

var x = 9999;

var y = 1000;
//这里我是先拼接定义一个随机数的字符串。 切记localStorage 只能存字符串。            
var rand = 'zhai'+ parseInt(Math.random() * (x - y + 1) + y);
                  
//定义好了之后，我开始存入 Set方法存入，“dat”是我定义的键名，rand就是值。键值对
localStorage.setItem("dat", rand);

//get就是取出，取的时候，传入键名就可以了。
var key = localStorage.getItem("dat");

3.localStorage的特性

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。

比如：打开www.baidu.com 这个网站，这个网站延伸出的任何窗口都是可以获取到的。数据共享。

localStorage 属性是只读的。

4.我们来看下，储存之后，除了用get获取，在浏览器是怎么查看和清理的。

   4-1 查看

  4-2 删除/清理，选择对应的网站，清理对应的localStorage。这个是长期存在的，除非浏览器窗口关掉，或者你手动这里清除。不然一直保存的。当然还可以用代码在jq里面清理

5.这个用处的延伸是很广泛的，作用也很大。这里说一下根据 localStorage 来做一个对于没有登录的人/游客来限制他表单提交的次数

6.先来看前端js部分  先判断，用户是第几次提交的表单

var x = 9999; //随机数最大值
                  
var y = 1000; //随机数最小值
                  
var rand = 'zhai'+ parseInt(Math.random() * (x - y + 1) + y); //前面拼接一个 zhai
                  
var key = localStorage.getItem("dat"); //先获取，看存在不存在
                  
var get_key = '';//定义一个空变量，这个是要用ajax传递到后端查询用的
                  
if(key != null){ 
 //判断，如果存在，那就不是第一次提交了，已经给用户创建了一个键值对，而且已经存储了
 //那就直接赋值，不用在生产新的了，传递到后端进行查询对比。                    
 get_key = key;
                  
}else{
 //如果不存在，那就是第一次提交表单，那就需要给用户创建一个新的键值对，存储在浏览器                     
localStorage.setItem("dat", rand);
 //然后再取出来，赋值给变量，传递到后端进行存储。                     
get_key = localStorage.getItem("dat");
                  
}

 7. Ajax提交到后端进行查询和保存

 

$.ajax({
    //带上查询出来的数据                
    url: 'index.php?route=product/product/write&product_id=1&key='+get_key+'',
    //提交方式post                      
    type: 'post',
    //数据类型，json                  
    dataType: 'json',
    //data是我的表单所有数据                  
    data: $("#form-review").serialize(),
                      
    success: function(json) {
                                                      
    if (json['error']) {
                             
        layer.msg(json['error']);
                          
    }
                          
    if (json['success']) {
                              
        layer.msg(json['success']);                              
        //提交完成之后，刷新页面                      
        window.location.reload();
                          
    }

                      
}
                  
});

8.后端PHP处理

public function write (){
    //获取JQ生成的本地文件内容
    $return = $this->model_catalog_review->jqkey($this->request->get['key']);
    //model层返回的$return是布尔值
    if($return){
        //true 
        //第一次提交，直接进行表单数据添加到数据库的处理操作，这里我就不写了   
    }else{
        //false
        //表示，刚刚已经提交过了，请等待五分钟再次提交。
        $json['error'] = $this->language->get('不好意思，你提交的太频繁了，请休息五分钟之后再次提交');
    }
}

9.再来看model处理层

 

class ModelCatalogReview extends Model {
    public function jqkey($key){
        //接收C层传递过来的值
	    $data_key['jq_key'] = $key;
        //带着值在表里进行查询
	    $find = $this->ocxdm->table('jqkey')->where($data_key)->find();
        //如果是空的，查不到，那就是第一次提交，生成一个时间戳，存在表中，向C层返回 true，表示可以提交
	    if(empty($find)){
	        $add['jq_key'] = $key;
	        $add['add_time'] = time();
            $add = $this->ocxdm->table('jqkey')->add($add);
            return true;
        }else{
            //如果不是空的，那就是之前提交过了的
            //取出他上次提交的时间
            $min_time = date("Y-m-d H:i:s",$find['add_time']);
            //现在当前的时间
            $max_time = date("Y-m-d H:i:s",time());
            //两个时间互相一减等于秒数
            $res = strtotime($max_time)-strtotime($min_time);
            //再除以60就是分钟
            $res = $res/60;
            //如果两个时间大于五分钟，就可以提交，并且把这里提交的时间修改进去
            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{
                //如果小于五分钟就不允许提交
                return false;
            }
        }
    }


}