基于js 本地存储(详解)

在客户端运行的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 本地存储(详解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 纯js实现无限空间大小的本地存储

    纯js实现无限空间大小的本地存储

    好久没有写博客了,想到2年前答应要放出源代码的也没放出来,最近终于有空先把纯js实现无限空间大小的本地存储的功能开源了, 项目地址https://github.com/xueduany/localstore, demo见http://xueduany.github.io/localstore/, 下面给大家简单说说大概原理,具体细节和异常处理后面有机会在单独说 先说下突破本地localStorage的原理,官方原话是这么说的http://www.w3.org/TR/2013/PR-webstor

  • 本地存储localStorage用法详解

    一.什么是localStorage? 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同. 二.localStorage的优势与局限 localStorage的优势 1.localStorage拓展了cookie的4K限制 2.localStorage会可

  • JS实现本地存储信息的方法(基于localStorage与userData)

    本文实例讲述了JS实现本地存储信息的方法.分享给大家供大家参考,具体如下: WEB应用的快速发展,是的本地存储一些数据也成为一种重要的需求,实现的方案也有很多,最普通的就是cookie了,大家也经常都用,但是cookie的缺点是显而易见的,其他的方案比如:IE6以上的userData,Firefox下面的globalStorage,以及Flash的本地存储,除了Flash之外,其他的几个都有一些兼容性的问题. sessionStorage与localStorage Web Storage实际上由

  • js浏览器本地存储store.js介绍及应用

    store.js - 轻松实现本地存储(LocalStorage) store.js 是一个兼容所有浏览器的 LocalStorage 包装器,不需要借助 Cookie 或者 Flash.store.js 会根据浏览器自动选择使用 localStorage.globalStorage 或者 userData 来实现本地存储功能. store.js 提供非常简洁的 API 来实现跨浏览器的本地存储功能: 复制代码 代码如下: store.set('username', 'marcus') stor

  • 基于js 本地存储(详解)

    在客户端运行的JS是不能操作用户电脑磁盘中的文件的(保护客户端运行的安全) 1.JS中的本地存储: 使用JS向浏览器的某一个位置中存储一些内容,浏览器即使关闭了,存储的信息也不会销毁,当在重新打开浏览器的时候我们依然可以获取到上一次存储的信息 本地存储的方案: 传统: cookie:把信息存储到客户端的浏览器中(但是项目服务器端也是可以获取COOKIE的) session:把信息存储到服务器上的(服务器存储) HTML5:webStorage localStorage:永久存储在客户端的本地 s

  • 关于AngularJs数据的本地存储详解

    第一.创建一个factory来储存和调取你的数据(你可以单独创建一个js文件,按照语义命名如:dataService.js.然后在你的主页面引入这个JS文件) <!--引入到你的主页面里面--> <script src="dataService.js"></script> 创建一个factory 'use strict'; angular.module('myApp') .factory('datadService',['$window',funct

  • JS库之Highlight.js的用法详解

    JS库之Highlight.js的用法详解

    官网:https://highlightjs.org/ 下载地址:https://highlightjs.org/download/ 下载到本地后,新建个页面测试 1.在head中加入css和js的引用 <head> <title>highlight</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <link r

  • 基于python爬虫数据处理(详解)

    基于python爬虫数据处理(详解)

    一.首先理解下面几个函数 设置变量 length()函数 char_length() replace() 函数 max() 函数 1.1.设置变量 set @变量名=值 set @address='中国-山东省-聊城市-莘县'; select @address 1.2 .length()函数 char_length()函数区别 select length('a') ,char_length('a') ,length('中') ,char_length('中') 1.3. replace() 函数

  • Node.js返回JSONP详解

    Node.js返回JSONP详解

    在使用JQuery的Ajax从服务器请求数据或者向服务器发送数据时常常会遇到跨域无法请求的错误,常用的解决办法就是在Ajax中使用JSONP.基于安全性考虑,浏览器会存在同源策略,然而<script/>标签却具有跨域访问数据的能力,这就是JSONP工作的基本原理.有关同源策略以及什么是JSONP. 在Node.js中实现JSONP非常简单,通过下面的代码我们从服务器返回并运行一个JavaScript函数,这个JavaScript函数已经在调用方提前被定义好了,于是当它被返回的时候就自动执行了.

  • 基于字符串常用API(详解)

    API(Application Programming Interface):应用程序编程接口 使用Scanner 获取键盘录入的字符串 next() ; 在遇到空格的时候 会判定为当前的输入结束 空格之后的内容会收不到 nextLine(); 可以避免被空格中断 , 但是在于接收数字一起使用的时候会被干扰 创建字符串对象 public String(String original) ---> 通过字符串创建一个字符串对象 public String(char[] value) -=--> 通

  • js对象实例详解(JavaScript对象深度剖析,深度理解js对象)

    js对象实例详解(JavaScript对象深度剖析,深度理解js对象)

    这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕. 平时发的文章基本都是开发中遇到的问题和对最佳解决方案的探讨,终于忍不住要写一篇基础概念类的文章了. 本文探讨以下问题,在座的朋友各取所需,欢迎批评指正: 1.创建对象 2.__proto__与prototype 3.继承与原型链 4.对象的深度克隆 5.一些Object的方法与需要注意的点 6.ES6新增特性 下面反复提到实例对象和原型对象,通过构造函数 new

  • 基于Oracle闪回详解(必看篇)

    Oracle 9i 开始支持闪回,Oracle10g开始全面支持闪回功能,Oracle11g有所完善,为大家快速的恢复数据,查询历史数据提供了很大的便捷方法. 本文主要对Oracle常用闪回使用做些详细介绍,其中对于不常用的事务和版本闪回,这里就不做介绍 一.Oracle闪回概述 闪回级别 闪回场景 闪回技术 对象依赖 影响数据 数据库 表截断.逻辑错误.其他多表意外事件 闪回DATABASE 闪回日志.undo 是 DROP 删除表 闪回DROP 回收站(recyclebin) 是 表 更新.

  • Js面试算法详解

    素数 Q:你将如何验证一个素数? A:一个素数只能被它自己和1整除.所以,我将运行一个while循环并加1.(看代码示例,如果你无法理解,那这不是你的菜.先回去学习javaScript基础知识然后再回来吧.) 方法1 function isPrime(n){ var divisor = 2; while (n > divisor){ if(n % divisor == 0){ return false; } else divisor++; } return true; } isPrime(137

  • docker下的 redis 之持久化存储详解

    本章节开始 我们在docker下 进行 spring Boot项目操作redis 准备工作: (1) 创建文件夹:usr/local/work/share (2) 拉取项目,这是一个打包好的jar包 (3) 将拉取的 jar包放到刚刚创建的文件夹下,同时再创建一个名字为 docker-compose.yml的文件 (4) 在 tmp目录中创建一个 data 文件夹 (5) 并在 docker-compose.yml文件中写入以下内容: redis: image: redis:3 ports: -

随机推荐