js如何实现本地存储
这篇文章主要介绍了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如何实现本地存储”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
分享题目：js如何实现本地存储
本文链接：http://ybzwz.com/article/ihcopg.html
