JavaScript学习篇--本地存储

hss01248 发布于2019-08-22 10:54 / 1725人阅读

摘要：本地存储的方案传统把信息存储到客户端的浏览器中但是项目服务器端也是可以获取的把信息存储到服务器上的服务器存储永久存储在客服端的本地。

在客户端运行的js是不能操作用户电脑磁盘中的文件的（这是为了保护客户端运行的安全）。

1、js中的本地存储：

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

本地存储的方案：

传统：

cookie：把信息存储到客户端的浏览器中（但是项目服务器端也是可以获取cookie的）

session：把信息存储到服务器上的（服务器存储）

HTML5：webstorage

localstorage：永久存储在客服端的本地。

sessionstorage：信息的会话存储，会话窗口存在信息也存在，会话窗口关闭信息也就消失了。

2、cookie localstorage sessionstorage

->webStorage

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

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

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

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

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

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

localStorage.setltem("age",7);

localStorage.getltem("age");

localStorage.removeltem("age");

localStorage.clear();

localStorage和sessionStorage的区别

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

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

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

服务器托管云服务器一篇深度学习本地javascript 学习javascript javascript学习

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91439.html

前端相关大杂烩

摘要：希望帮助更多的前端爱好者学习。前端开发者指南作者科迪林黎，由前端大师倾情赞助。翻译最佳实践译者张捷沪江前端开发工程师当你问起有关与时，老司机们首先就会告诉你其实是个没有网络请求功能的库。前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 评论0 收藏0
Day 19: EmberJS 入门指南

摘要：在文件夹内创建，内容如下创建，内容如下使用安装依赖在的头部加入调用命令，同时在你的默认浏览器中打开。最后，我们更新下，给每个报道添加链接修改完毕地后，可以在浏览器中直接看到结果。编者注：我们发现了有趣的系列文章《30天学习30种新技术》，正在翻译，一天一篇更新，年终礼包。下面是第19天的内容。到目前为止，我们这一系列文章涉及了Bower、AngularJS、GruntJS、P...

awesome23 2019-08-19 14:29 评论0 收藏0
腾讯前端求职直播课——笔试篇

摘要：主讲人黎腾年加入腾讯，技术面试官引入面试是一个让面试官认识你的过程，尽全力展现的你就好，正常发挥没通过再接再厉，失常发挥没通过实为遗憾要求要求找准定位，重视基础前端发展日新月异，打牢基础原生，才能以不变应万变如性能，安全要求用更远的视角去看主讲人：黎腾(Litten)：13年加入腾讯，技术面试官 1.引入面试是一个让面试官认识你的过程，尽全力展现100%的你就好，正常发挥没通过...

Sunxb 2019-08-20 18:02 评论0 收藏0
腾讯前端求职直播课——笔试篇

摘要：主讲人黎腾年加入腾讯，技术面试官引入面试是一个让面试官认识你的过程，尽全力展现的你就好，正常发挥没通过再接再厉，失常发挥没通过实为遗憾要求要求找准定位，重视基础前端发展日新月异，打牢基础原生，才能以不变应万变如性能，安全要求用更远的视角去看主讲人：黎腾(Litten)：13年加入腾讯，技术面试官 1.引入面试是一个让面试官认识你的过程，尽全力展现100%的你就好，正常发挥没通过...

cnTomato 2019-08-29 12:55 评论0 收藏0
腾讯前端求职直播课——笔试篇

摘要：主讲人黎腾年加入腾讯，技术面试官引入面试是一个让面试官认识你的过程，尽全力展现的你就好，正常发挥没通过再接再厉，失常发挥没通过实为遗憾要求要求找准定位，重视基础前端发展日新月异，打牢基础原生，才能以不变应万变如性能，安全要求用更远的视角去看主讲人：黎腾(Litten)：13年加入腾讯，技术面试官 1.引入面试是一个让面试官认识你的过程，尽全力展现100%的你就好，正常发挥没通过...

yintaolaowanzi 2019-08-01 17:09 评论0 收藏0