基于bootstrap写的一点localStorage本地储存


Posted in Javascript onNovember 21, 2017

先给大家说下什么是localstorage

前几天在老项目中发现有对cookie的操作觉得很奇怪,咨询下来是要缓存一些信息,以避免在URL上面传递参数,但没有考虑过cookie会带来什么问题:

① cookie大小限制在4k左右,不适合存业务数据
② cookie每次随HTTP事务一起发送,浪费带宽

我们是做移动项目的,所以这里真实适合使用的技术是localstorage,localstorage可以说是对cookie的优化,使用它可以方便在客户端存储数据,并且不会随着HTTP传输,但也不是没有问题:

① localstorage大小限制在500万字符左右,各个浏览器不一致
② localstorage在隐私模式下不可读取
③ localstorage本质是在读写文件,数据多的话会比较卡(firefox会一次性将数据导入内存,想想就觉得吓人啊)
④ localstorage不能被爬虫爬取,不要用它完全取代URL传参
瑕不掩瑜,以上问题皆可避免,所以我们的关注点应该放在如何使用localstorage上,并且是如何正确使用。

摘要:

H5本地存储

在以前,我们想要存储一些数据,并且只是在前端使用,服务端并不会使用,我们只能存在cookie里,但是cookie会跟随请求头在客户端和服务端之间来回传递,而且cookie还有一些缺点,H5提供了webStorage的API用来做客户端的数据存储

cookie与webStorage的区别

  1. cookie有大小的限制,只能存储4kb,webStorage可以存储5Mb,cookie还有条数的限制
  2. cookie会跟随请求头在客户端和服务端之间传递,会影响带宽。
  3. cookie需要设置有效期,localStorage是永久保存,sessionStorage是会话保存,
  4. cookie可以设置作用path
  5. cookie的操作较为困难,webStorage的API较为容易
  6. cookie的兼容性比webStorage兼容性好

webStorage包含的存储方式

  1. localStorage :有效期是永远,永久保存;除非手动删除
  2. sessionStorage: 有效期是一次会话时间
  3. globalStorage、indexedDB、webSQL因为兼容性、实用性较差,所以,不使用

localStorage和sessionStorage 的使用方法(API)

  1. localStorage和sessionStorage的使用方法一样
  2. 增删改查

增/改: localStorage.setItem(key,value)/ localStorage.a = 1

查: length;key方法(index)得到对应的key getItem(key)/localStorage.a

删: removeItem(key)

清空: clear()

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<style>
 .panel-body input.form-control{
 width: 200px;
 }
</style>
<body>
 <div class="container">
 <div class="panel panel-primary insert">
 <div class="panel-heading">

 增加

 </div>
 <div class="panel-body">
 <label for="">key:</label>
 <input type="text" id="key" class="form-control">
 <label for="">value:</label>
 <input type="text" id="value" class="form-control">
 <button onclick="save()">save</button>
 </div>
 </div>
 <div class="panel panel-primary select">
 <div class="panel-heading">
 key-value-list:
 </div>
 <div class="panel-body">
 <button onclick="select()" class="btn btn-success">select</button>
 <button onclick="abc()" class="btn btn-warning">clear</button>
 <hr>
 <ul class="list-group">
 </ul>
 </div>
 </div>
 </div>
 </div>
 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
 <script>
 function save(){
 var key = $(".insert #key").val()
 var value = $(".insert #value").val()
 localStorage.setItem(key,value)
 //select()
 }
 function select(){
 let str = ''
 for(var i = 0;i < localStorage.length;i ++){
 var key = localStorage.key(i)
 var value = localStorage.getItem(key)
 str +=`
 <li class="list-group-item clearfix">
 key: <span class="label label-primary key">${key}</span>    
 value: <span class="label label-primary value">${value}</span>
 <button data-key='${key}' class="btn btn-danger delete pull-right">delete</button>
 </li>
 `
 }
 $(".select ul").html(str)
 }
 function abc(){
 localStorage.clear()
 $(".select ul").html("")
 }
 $(".select ul").delegate(".delete",'click',function () {
 console.log(1)
 var key = $(this).data("key")
 localStorage.removeItem(key)
 $(this).parent().remove()
 })
 </script>
</body>

总结

以上所述是小编给大家介绍的基于bootstrap写的一点localStorage本地储存,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript语言结构小记(一)
Sep 10 Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 Javascript
理解Javascript图片预加载
Feb 23 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
ES6深入理解之“let”能替代”var“吗?
Jun 28 Javascript
angular json对象push到数组中的方法
Feb 27 Javascript
select标签设置默认选中的选项方法
Mar 02 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
vue-form表单验证是否为空值的实例详解
Oct 29 Javascript
在Echarts图中给坐标轴加一个标识线markLine
Jul 20 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 #Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
Nov 21 #Javascript
微信小程序实现tab和swiper切换结合效果
Jul 17 #Javascript
微信小程序实现tab切换效果
Nov 21 #Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 #jQuery
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 #Javascript
值得收藏的vuejs安装教程
Nov 21 #Javascript
You might like
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
php 更新数据库中断的解决方法
2009/06/05 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
vue实现组件之间传值功能示例
2018/07/13 Javascript
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
python用pickle模块实现“增删改查”的简易功能
2017/06/07 Python
Python中字典和集合学习小结
2017/07/07 Python
深入理解Python中range和xrange的区别
2017/11/26 Python
Python切片索引用法示例
2018/05/15 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
python django中8000端口被占用的解决
2019/12/17 Python
Python语法之精妙的十个知识点(装B语法)
2020/01/18 Python
英格兰足协官方商店:England Store
2019/07/12 全球购物
英国时尚高尔夫服装购物网站:Trendy Golf
2020/01/10 全球购物
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
大学生安全责任书
2014/07/25 职场文书
幼儿园百日安全活动总结
2015/05/07 职场文书
大学生学习十八届五中全会精神心得体会
2016/01/05 职场文书
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技
ORACLE中dbms_output.put_line输出问题的解决过程
2022/06/28 Oracle