客户端存储

1.读取文件

步骤:

 1.给文件控件input 添加事件监听 监听内容的改变

  2.创建文件读取的 对象 new FileReader();

  3.使用readAsDataURL读取用户上传的this.files[0]

  4.当读取完成之后 _img.src = reader.result; 完成缩略图展示

<script>
        // setItem:设置当前值(键(key),值(value));
        localStorage.setItem('anhao',"天王盖地虎");
        localStorage.setItem('anhao1', "1天王盖地虎");
        localStorage.setItem('anhao2', "2天王盖地虎");
        localStorage.setItem('anhao3', "3天王盖地虎");

        // 获取存储信息
        // getItem:设置当前值(键(key));
        var rel=localStorage.getItem('anhao');
        console.log(rel);

        // 删除指定信息
        // localStorage.removeItem("anhao");

        // // 清除所有信息
        // localStorage.clear();

        // 获取存储的所有值
        console.log(localStorage.key(0));
        console.log(localStorage.key(1));
        console.log(localStorage.key(2));
        for(var i=0;i<localStorage.length;i++){
            // console.log(localStorage.key(i));//打印出来键
            console.log(localStorage.key(i), localStorage[localStorage.key(i)]);//打印出来键值对
        }

2.会话存储

<script>
        // 1.存值
        sessionStorage.setItem('bb', '121'); 
        sessionStorage.setItem('cc', '101'); 
        sessionStorage.setItem('a', '111'); // 将111的值存在了a的变量中

        // 2.取值
        var rr= sessionStorage.getItem('cc', '101'); 
        console.log(rr);
        var rel=sessionStorage.getItem('a'); // 从a的变量中取值进行赋值
        console.log(rel);//把赋在a里的值打印出来

        // 3.删除
        sessionStorage.removeItem("a") // 将值删除掉了

        // 4.全部清空
        sessionStorage.clear() // sessionStorage中的值全部清掉
        
    </script>

3.记录用户点击次数

 <button class="btn">点击</button>
    <div class="total">总点击次数</div>
    <div class="count">当前点击次数</div>

    <script>
        // 获取元素
        var btn=document.querySelector(".btn");
        var total = document.querySelector(".total");
        var count = document.querySelector(".count");

        // 当点击时会在  当前点击次数  出现个数
        btn.onclick=function(){
            if(!sessionStorage.count){
                sessionStorage.count=1;
            }
            else{
                sessionStorage.count=Number(sessionStorage.count)+1;//点击一次会自增
            }
            count.innerHTML="当前点击次数:"+sessionStorage.count;
        }

        // 关闭页面时触发 window.onunload
        window.onunload=function(){
            if(localStorage.total){
               localStorage.total =Number(localStorage.total)+Number(sessionStorage.count);
            }
            else{
                localStorage.total=Number(sessionStorage.count);
            }
        }
        if(!localStorage.total){
            localStorage.total=0;
        }
        total.innerHTML="总点击次数:"+localStorage.total;
    </script>

4.存储事件

 <input type="checkbox" value="唱">唱
    <input type="checkbox" value="跳">跳
    <input type="checkbox" value="rap">rap
    <input type="checkbox" value="篮球">篮球
    <button class="btn">点击保存</button>
    <script>
        var btn = document.querySelector(".btn");
        var input = document.querySelectorAll('input[type=checkbox]');

        var arr = [];
        btn.onclick = function () {
            // document.querySelector("")
            console.log(input[0].checked);
            for (var i = 0; i < input.length; i++) {
                if (input[i].checked) {
                    if (!arr.includes(input[i].value)) {
                        arr.push(input[i].value);

                    }
                }
            }
            console.log(arr);
            localStorage.setItem("hobby",arr.toString());
            console.log(localStorage.getItem("hobby"));
        }
    </script>

5.存储事件触发

 <script>

        // 这个页面触发 存储事件
        // - key : 修改或删除的key值，如果调用clear()时，该属性值为null
        // - newValue: 新设置的值，如果调用removeItem()时，该属性值为null
        // - oldValue : 调用改变前的value值；添加新项时，该属性值为null
        // - storageArea : 当前的storage对象
        // - url : 触发该存储变化脚本所在文档的URL（也就是说哪个页面修改的数据）
        window.addEventListener("storage", function (obj) {
            console.log(obj);
            console.log(obj.key);
            console.log(obj.newValue);
            console.log(obj.oldValue);
            console.log(obj.storageArea);
            console.log(obj.url);
        })
    </script>