User-Profile-Image
hankin
  • 5
  • 首页
  • 仓库
  • 留言
  • 免费下载v1.3.5
  • 分类
    • Yii2
    • wordpress
    • typeecho
    • server
    • qrcode
    • postgresql
    • php
    • jquery
    • javascript
    • html5
    • go
    • css3
    • coding
  • 页面
    • icon图标
    • 专题
    • 建站维护
    • 留言
    • 站点地图
  • 友链
    • 老赵茶馆
    • 淮城一只猫
    • 雨林寒舍
    • 饼子的博客
    • 轩枫阁
    • 广告联盟大事记
    • 主题笔记
    • 八方博客
    • 张维龙的个人博客
    • 瑞课学院
    • BBJ不败君
    • 悠悠吧
    • Heanny Blog
    • 资源谷
    • Yolen
Help?

Please contact us on our email for need any support

Support
    首页   ›   正文
html5

localStorage、cookie的使用总结

2018-05-13 10:56:26
1591  0 1

Locastorage

参考链接:localStorage

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

存

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

局限:

 ①、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;
  }) 

如本文“对您有用”,欢迎随意打赏作者,让我们坚持创作!

1 打赏
评论 (0)

点击这里取消回复。

欢迎您 游客  

hankin
smarty_hankin主题 持续为开发者免费开源!
143文章 290评论 760点赞 192753浏览

关注公众号 回复【下载主题】
加QQ群1018841266
最新评论
+207
随机文章
GitHub 移动端正式发布啦!
1年前
2020北京php培训哪里好?
1年前
php写前端有什么优点和缺点
1年前
再见2019,加油2020!30条经验送给即将进入编程行业的你
1年前
回顾:PHP亮点2019
1年前
我的作品




tags
css3 html5 javascript php postgresql qrcode typeecho wordpress wordpress主题 Yii2
Copyright © 2021 网站备案号: 浙ICP备20002401号
smarty_hankin 主题. Designed by hankin
主页
页面
  • icon图标
  • 专题
  • 建站维护
  • 留言
  • 站点地图
博主
hankin
hankin 管理员
博客模板_网站模板_HTML模板_博客模板网站免费下载
143 文章 290 评论 192753 浏览
测试
测试
赞赏作者

请通过微信、支付宝 APP 扫一扫

感谢您对作者的支持!

 支付宝 微信支付