• LocalStorage存储和cookie存储


    localStorage是H5的新特性,主要用来本地存储,一般浏览器支持的大小是5M,不同浏览器会有所不同,解决了cookie存储空间不足的问题。

    2、使用:
         ⑴、存

    if(!window.localStorage){

        alert("浏览器不支持localstorage");

        return false;

    }else{

        var storage = window.localStorage;

        // 方法1

        storage["a"] = 1;

        // 方法2

        storage.b = 1;

        // 方法3  推荐

        storage.setItem("c", 3);

        console.log(typeof storage["c"]); // string  int类型打印出来是string,localstorage只支持string类型的存储

    }

    ⑵、取  

    if(!window.localStorage){

        alert("浏览器不支持localstorage")

    }else{

        var storage=window.localStorage;

        // 方法1

        var a=storage.a;

        // 方法2

        var b=storage["b"]

        // 方法3 推荐

        var c = storage.getItem("c");

    }


    ⑶、修改

    if(!window.localStorage){

                alert("浏览器支持localstorage");

            }else{

                var storage=window.localStorage;

                storage.b=1;

                storage.b=4; // 直接修改

                console.log(storage.b);

            }

    ⑷、删除

    // 移除所有

    localStorage.clear();

     

    // 删除某个键值对

    localStorage.removeItem("a");

    ⑸、key()方法

    for(i=0;i<storage.length;i++){

        var key =storage.key(i);

        console.log(key) // 获取对应的键

        

    }
    ⑹、存入为JSON形式时,先转为json字符串

    function setStorage () {

    var str_username = $("#loginname").val();  

    var str_password = $("#password").val();

    var storage=window.localStorage;

    var data = {

    username: str_username,

    password: str_password

    }

    var d = JSON.stringify(data)

    storage.setItem("data",d);



    ⑺、读取后用转为JSON对象 

     //将JSON字符串转换成为JSON对象输出

                var json=storage.getItem("data");

                var jsonObj=JSON.parse(json);

                console.log(typeof jsonObj); // Object


    3、局限:
         ①、IE8以上才支持
         ②、浏览器会把localstorage的值类型限定为string类型,JSON对象需要转换。
         ③、本质上是存取字符串,存储内容太多消耗空间,页面变卡。
         ④、localStorage在浏览器的隐私模式下不可读取
         ⑤、不能被爬虫抓取

    Cookie
    让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术。
    使用jquery.cookie.js
    1、引入jquery.cookie.js
          <script type="text/javascript" src="js/jquery.min.js"></script>
          <script type="text/javascript" src="js/jquery.cookie.js"></script>

    2、设置 "会话"cookie 

    $.cookie('username', 'xy');

     cookie有效期默认到用户关闭浏览器 

    3、设置有效时间
    $.cookie('username', 'xy', { expires: 7 });

    4、设置有效路径 
    $.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });// 如果在整个网站中访问这个cookie需要这样设置有效路径:path: '/'

    5、读取cookie
     $.cookie('username') 

     :cookie是基于域名来储存的。意思您要放到测试服务器上或者本地localhost服务器上才会生效。cookie具有不同域名下储存不可共享的特性。单纯的本地一个html页面打开是无效的。

    6、删除cookie 

     $.cookie('username', null);   //通过传递null作为cookie的值即可

    7、可选参数

    $.cookie('the_cookie','the_value',{

        expires:7,  //(Number|Date)有效期;设置一个整数时,单位是天;也可以设置一个日期对象作为Cookie的过期日期;

        path:'/',   // (String)创建该Cookie的页面路径;

        domain:'jquery.com', // (String)创建该Cookie的页面域名;

        secure:true // (Booblean)如果设为true,那么此Cookie的传输会要求一个安全协议,例如:HTTPS;

      }) 

  • 相关阅读:
    electron之打包成安装程序
    electron之环境安装、启动程序
    微信支付.net官方坑太多,我们来精简
    微信支付官方.net版之坑你没商量
    程序员出路在何方
    简单介绍
    mac中显示隐藏文件
    sublime Text 3 安装emmet
    Andriod学习笔记5:通过NDK在C++中实现日志输出
    Andriod学习笔记4:mac下搭建 Eclipse+CDT 集成开发环境
  • 原文地址:https://www.cnblogs.com/ldlx-mars/p/7834528.html
Copyright © 2020-2023  润新知