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

时间: 2017-08-13

本地存储localStorage用法详解

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

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实现无限空间大小的本地存储

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

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

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

JS获得图片alt信息的方法

本文实例讲述了JS获得图片alt信息的方法.分享给大家供大家参考.具体如下: 下面的JS代码可通过图片的alt属性获得图片的提示信息 <!DOCTYPE html> <html> <body> <img id="compman" src="compman.gif" alt="Crazy computerman" width="107" height="98">

JS+HTML5本地存储Localstorage实现注册登录及验证功能示例

本文实例讲述了JS+HTML5本地存储Localstorage实现注册登录及验证功能.分享给大家供大家参考,具体如下: 源码引用的js.jquery都是在线的,代码拷到本地就能运行 登录: <html ng-app="ionicApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, m

JS基于cookie实现来宾统计记录访客信息的方法

本文实例讲述了JS基于cookie实现来宾统计记录访客信息的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript记录访客的来宾信息,记录是第几次来访,显示的信息有:您的名字;您浏览该网页的次数;您上次浏览网页的时间.可以更改姓名. 运行效果如下图所示: 具体代码如下: <html> <head> <title>记录客户信息</title> <script language="JavaScript"> <!

Node.js 在本地生成日志文件的方法

平常都使用console来打印 node 脚本执行时需要看到的信息,但这些信息也就只能在控制台查看.假如你希望将打印的信息输出到日志(log)文件查看的话,那就往下看看吧. 1.前言 期望: 每次运行脚本时,生成log日志存储到本地 每次执行脚本,之前日志内容清空 需要了解的知识点: fs new console.Console 2.什么是 fs 使用 node.js 对日志进行存储,就一定会对本地文件的增删改查,那么我们需要用到fs. 如果你写过 node,想必你应该见过它fs,fs全称为文件

js仿微博实现统计字符和本地存储功能

随着移动设备和Web应用的普及,为了更好的便于用户的使用,对于网页或应用程序的用户体验要求就越来越高,确实是这样,作为用户更喜欢选择用户体验效果好的网站或应用程序,所以作为开发者的我们就需要开发出更人生化的应用程序了. 相信许多人有使用微博的经验,像微博这样的社交平台,好的用户体验就变得尤其重要了. 例如:我们在发微博时,文本框会实时地提示我们剩余字符数,这样人性化的提示方便了用户知道微博字数的限制,同时也限制了用户的输入字数. 有一句话我们要牢记在心的是:凡是输入,必有限制:凡是输入,必须校验

详解基于本地存储的kvm虚拟机在线迁移

kvm虚拟机迁移分为4种 (1)热迁移基于共享存储 (2)热迁移基于本地存储 (3)冷迁移基于共享存储 (4)冷迁移基于本地存储 这里介绍的是基于本地存储的热迁移 动态块迁移版本要求 qemu版本要求  大于或等于0.12.1(centos6.7或以上都没问题) rpm -qa|grep qemu qemu-kvm-0.12.1.2-2.491.el6_8.1.x86_64 qemu-kvm-tools-0.12.1.2-2.491.el6_8.1.x86_64 目标宿主机:192.168.1.