基于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 相关文章推荐
经常用到的JavasScript事件的翻译
Apr 09 Javascript
jQuery网页选项卡插件rTabs用法实例分析
Aug 26 Javascript
JavaScript仿网易选项卡制作代码
Oct 06 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
详细分析jsonp的原理和实现方式
Nov 20 Javascript
浅谈Angular HttpClient简单入门
May 04 Javascript
微信小程序实现刷脸登录
May 25 Javascript
基于JavaScript实现一个简单的Vue
Sep 26 Javascript
详解Webpack loader 之 file-loader
Nov 07 Javascript
微信小程序获取用户openid的实现
Dec 24 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 Javascript
express框架下使用session的方法
Jul 31 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
ThinkPHP的L方法使用简介
2014/06/18 PHP
深入理解PHP之OpCode原理详解
2016/06/01 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
JavaScript中常见陷阱小结
2010/04/27 Javascript
jquery五角星评分插件示例分享
2014/02/21 Javascript
javascript中attachEvent用法实例分析
2015/05/14 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
2015/12/03 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
2016/06/16 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
[00:59]DOTA2荣耀之路1:Doom is back!weapon X!
2018/05/22 DOTA
Python实现的rsa加密算法详解
2018/01/24 Python
Python3.4学习笔记之列表、数组操作示例
2019/03/01 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
使用darknet框架的imagenet数据分类预训练操作
2020/07/07 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
爱心活动计划书
2014/04/26 职场文书
学习十八大的心得体会
2014/09/01 职场文书
2015年市场营销工作总结
2015/07/23 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书
医学会议开幕词
2016/03/03 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang
关于python类SortedList详解
2021/09/04 Python
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏
Python开发五子棋小游戏
2022/04/28 Python