基于js 本地存储(详解)


Posted in Javascript onAugust 16, 2017

在客户端运行的JS是不能操作用户电脑磁盘中的文件的(保护客户端运行的安全)

1、JS中的本地存储:

使用JS向浏览器的某一个位置中存储一些内容,浏览器即使关闭了,存储的信息也不会销毁,当在重新打开浏览器的时候我们依然可以获取到上一次存储的信息

本地存储的方案:

传统:

cookie:把信息存储到客户端的浏览器中(但是项目服务器端也是可以获取COOKIE的)

session:把信息存储到服务器上的(服务器存储)

HTML5:webStorage

localStorage:永久存储在客户端的本地

sessionStorage:信息的会话存储,会话窗口存在信息也存在,会话窗口关闭信息就消失了

2、COOKIE  localStorage sessionStorage

->webStorage

setItem([key],[value]):像客户端的本地存储一条记录,存储的[value]需要是字符串格式的,如果编写的不是字符串,浏览器会默认的转化为字符串然后在进行存储;同源下存储的[key]是不会重复的,如果之前有的话,是把存储的信息值进行修改。如果存储的value是一个对象,需要先使用JSON.stringify()进行转化。

getItem([key]):获取之前存储的值

removeItem([key]):移除KEY对应的存储记录

clear():把当前源下的所有的存储记录都移除掉

localStorage.length:获取存储的记录条数

localStorage.key(0):获取索引为0这一项的KEY是什么

localStorage.setItem('age',7);

localStorage.getItem('age');

localStorage.removeItem('age');

localStorage.clear();

 

localStorage和sessionStorage的区别

localStorage属于永久存储在本地,不管是刷新页面还是关掉页面或者关闭浏览器,存储的内容都不会消失,只有我们自己手动的去删除才会消失(不管是杀毒软件还是浏览器自带的清除历史记录功能都不能把localStorage存储的内容清除掉)

sessionStorage属于临时的会话存储,只要当前的页面不关闭,信息就可以存储下来,但是页面一旦关闭,存储的信息就会自动清除(F5刷新页面只是把当前的DOM结构等进行重新的渲染,会话并没有关闭)

cookie

document.cookie = 'age = 7'

cookie和localStorage的区别

1)、cookie

cookie存储内容的大小是有限制的,一般同源下只能存储4kb的内容;localStorage存储的内容也有大小限制,一般同源下只能存储5MB

cookie存储的内容是有过期时间的,而localStorage是永久存储到本地,使用杀毒软件或者浏览器自带的清除垃圾的功能都可能会把存储的cookie给删除掉

用户可能处于安全的角度禁用cookie(无痕浏览器),但是不能禁止localStorage

真是项目中的本地存储都使用哪些东西?

记住用户名密码或者自动登录;用户的部分信息,当用户登录成功后我们会把用户的一些信息记录到本地的cookie中,这样在项目中的任何页面都可以知道当前登录的用户是哪一个了;购物车...(存储少量信息或者是需要浏览器兼容的都需要使用cookie来进行存储)

2)、localStorage

在PC端我们可以用其存储 某一个JS或者CSS中的源代码;还可以把一些不需要经常更新的数据存储到本地,存储的时候可以设置一个存储的时间,以后重新刷新页面,看一下时间有没有超过预定的时间,如果已经过时了,我们从新获取最新数据,没超过我们使用本地数据。

本地存储都是明文存储

对于重要的信息我们一般不要存储到本地,如果非要存储的话我们需要把存储的信息进行加密

可逆转加密:加密完成还可以解密回来

不可逆转加密:MD5 

以上这篇基于js 本地存储(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在线游戏大家来找茬II
Sep 30 Javascript
JS对URL字符串进行编码/解码分析
Oct 25 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
JS实现的几个常用算法
Nov 12 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Oct 24 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
Webpack优化配置缩小文件搜索范围
Dec 25 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 Javascript
基于Vue实例生命周期(全面解析)
Aug 16 #Javascript
基于JQuery的Ajax方法使用详解
Aug 16 #jQuery
angular或者js怎么确定选中ul中的哪几个li
Aug 16 #Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
Aug 16 #Javascript
label+input实现按钮开关切换效果的实例
Aug 16 #Javascript
bootstrap modal+gridview实现弹出框效果
Aug 15 #Javascript
vue实现点击图片放大效果
Aug 15 #Javascript
You might like
PHP代码网站如何防范SQL注入漏洞攻击建议分享
2012/03/01 PHP
Linux下编译redis和phpredis的方法
2016/04/07 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
Js实现网页键盘控制翻页的方法
2014/10/30 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
JavaScript中的getMilliseconds()方法使用详解
2015/06/10 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
2016/02/14 Javascript
JS不完全国际化&本地化手册 之 理论篇
2016/09/27 Javascript
深入理解JavaScript定时机制
2016/10/27 Javascript
jQuery解析返回的xml和json方法详解
2017/01/05 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
2017/03/08 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
浅谈KOA2 Restful方式路由初探
2019/03/14 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
python django 实现验证码的功能实例代码
2017/05/18 Python
python实现微信接口(itchat)详细介绍
2017/10/23 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
python实现多人聊天室
2020/03/31 Python
Python实现的特征提取操作示例
2018/12/03 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
简单介绍python封装的基本知识
2019/08/10 Python
keras 多gpu并行运行案例
2020/06/10 Python
香港化妆品经销商:我的公主
2016/08/05 全球购物
大一新生军训时的自我评价分享
2013/12/05 职场文书
创先争优承诺书
2015/01/20 职场文书
食品仓管员岗位职责
2015/04/01 职场文书
初级职称评定工作总结
2015/08/13 职场文书
《社戏》教学反思
2016/02/22 职场文书
pytorch显存一直变大的解决方案
2021/04/08 Python