基于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 相关文章推荐
在textarea中显示html页面的javascript代码
Apr 20 Javascript
Packer 3.0 JS压缩及混淆工具 下载
May 03 Javascript
超越Jquery_01_isPlainObject分析与重构
Oct 20 Javascript
javascript学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
js实现一个链接打开两个链接地址的方法
May 12 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
Sep 04 Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 Javascript
详解webpack 入门与解析
Apr 09 Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 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
Sony CFR 320 修复改造
2020/03/14 无线电
给多个地址发邮件的类
2006/10/09 PHP
PHP下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
php 中英文语言转换类
2011/09/07 PHP
Laravel5.4框架使用socialite实现github登录的方法
2019/03/20 PHP
安装docker和docker-compose实例详解
2019/07/30 PHP
php新建文件的方法实例
2019/09/26 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
Javascript 页面模板化很多人没有使用过的方法
2012/06/05 Javascript
最好用的省市二级联动 原生js实现你值得拥有
2013/09/22 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
2014/01/02 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
js input输入百分号保存数据库失败的解决方法
2018/05/26 Javascript
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
python 实现堆排序算法代码
2012/06/05 Python
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
Python实现压缩和解压缩ZIP文件的方法分析
2017/09/28 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
python使用turtle库绘制时钟
2020/03/25 Python
selenium+python自动化测试之使用webdriver操作浏览器的方法
2019/01/23 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
Python模拟登入的N种方式(建议收藏)
2020/05/31 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
丝芙兰巴西官方商城:SEPHORA巴西
2016/10/31 全球购物
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
办公室文秘自我评价
2013/09/21 职场文书
生产班组长岗位职责
2014/01/05 职场文书
好矿嫂事迹材料
2014/01/21 职场文书
2014年检验员工作总结
2014/11/19 职场文书
铁人观后感
2015/06/16 职场文书
期中考试后的感想
2015/08/07 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
python之django路由和视图案例教程
2021/07/26 Python