博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
localStorage、cookie的使用总结
阅读量:6247 次
发布时间:2019-06-22

本文共 2435 字,大约阅读时间需要 8 分钟。

hot3.png

 

 1、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;

  }) 

  更多资料,进群领取 
web前端互动交流群,434623999

转载于:https://my.oschina.net/u/3709170/blog/1573422

你可能感兴趣的文章
使用别的电脑连接另一台电脑当中的虚拟机中的kylin项目
查看>>
空间统计笔记之二(分布模式工具集,Analyzing Patterns Toolset)
查看>>
一定要为了成功才去创业吗?
查看>>
4.2 列表生成式、迭代器与生成器
查看>>
Sql Server系列:分区表操作
查看>>
myeclipse maven tomcat插件 创建web工程
查看>>
2.java线程之ThreadLocal
查看>>
Unsafe 的简单使用
查看>>
明确价值体现
查看>>
myeclipse修改内存大小不足tomcat内存不足
查看>>
C++STL学习笔记_(2)deque双端数组知识
查看>>
CodeFoces 489E 01分数规划(二分的dp)
查看>>
浅谈CSRF攻击方式[转]
查看>>
一道淘汰85%面试者的百度开发者面试题参考答案
查看>>
如何将Drawable转为Bitmap?
查看>>
微信公众平台消息接口开发(4)
查看>>
VB控件间的拖放
查看>>
token 验证的逻辑
查看>>
机器学习算法之概率分类法
查看>>
phone8 in-app purchasing
查看>>