在客户端运行的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  # 本地存储  # JavaScript本地存储的几种方式小结  # Javascript本地存储localStorage看这一篇就够了  # 详解JavaScript前端如何有效处理本地存储和缓存  # JavaScript本地存储全面解析  # javascript中localStorage本地存储(新增、删除、修改)使用详细教程  # JavaScript中本地存储(LocalStorage)和会话存储(SessionStorage)  # JS实现本地存储信息的方法(基于localStorage与userData)  # javascript中本地存储localStorage  # sessionStorage  # cookie  # indexDB的用法与使用场景汇总  # 客户端  # 还可以  # 是有  # 给大家  # 会把  # 自带  # 移除  # 都是  # 是一个  # 这一  # 就会  # 也有  # 都不  # 不需要  # 才会  # 可以用  # 不可逆转  # 希望能  # 或者是  # 购物车 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 如何在IIS管理器中快速创建并配置网站？  Laravel怎么发送邮件_Laravel Mail类SMTP配置教程  如何在腾讯云服务器快速搭建个人网站？  网页设计与网站制作内容,怎样注册网站？  如何用好域名打造高点击率的自主建站？  阿里云网站搭建费用解析：服务器价格与建站成本优化指南  ChatGPT 4.0官网入口地址 ChatGPT在线体验官网  Linux虚拟化技术教程_KVMQEMU虚拟机安装与调优  Laravel如何使用Spatie Media Library_Laravel图片上传管理与缩略图生成【步骤】  如何在 React 中条件性地遍历数组并渲染元素  小米17系列还有一款新机？主打6.9英寸大直屏和旗舰级影像  学生网站制作软件,一个12岁的学生写小说，应该去什么样的网站？  Laravel如何理解并使用服务容器（Service Container）_Laravel依赖注入与容器绑定说明  ChatGPT怎么生成Excel公式_ChatGPT公式生成方法【指南】  百度浏览器网页无法复制文字怎么办 百度浏览器复制修复  Laravel用户密码怎么加密_Laravel Hash门面使用教程  Microsoft Edge如何解决网页加载问题 Edge浏览器加载问题修复  浏览器如何快速切换搜索引擎_在地址栏使用不同搜索引擎【搜索】  西安市网站制作公司,哪个相亲网站比较好?西安比较好的相亲网站？  千问怎样用提示词获取健康建议_千问健康类提示词注意事项【指南】  武汉网站设计制作公司,武汉有哪些比较大的同城网站或论坛，就是里面都是武汉人的？  Laravel的契約(Contracts)是什么_深入理解Laravel Contracts与依赖倒置  通义万相免费版怎么用_通义万相免费版使用方法详细指南【教程】  如何制作公司的网站链接,公司想做一个网站，一般需要花多少钱？  Laravel如何使用集合（Collections）进行数据处理_Laravel Collection常用方法与技巧  HTML透明颜色代码在Angular里怎么设置_Angular透明颜色使用指南【详解】  Laravel如何使用Gate和Policy进行权限控制_Laravel权限判定与策略规则配置  Laravel如何获取当前登录用户信息_Laravel Auth门面使用与Session用户读取【技巧】  js实现点击每个li节点，都弹出其文本值及修改  Laravel路由怎么定义_Laravel核心路由系统完全入门指南  免费视频制作网站,更新又快又好的免费电影网站？  js实现获取鼠标当前的位置  ,网页ppt怎么弄成自己的ppt？  Laravel怎么配置.env环境变量_Laravel生产环境敏感数据保护与读取【方法】  湖南网站制作公司,湖南上善若水科技有限公司做什么的？  Laravel如何使用缓存系统提升性能_Laravel缓存驱动和应用优化方案  Laravel如何实现全文搜索功能？（Scout和Algolia示例）  米侠浏览器网页背景异常怎么办 米侠显示修复  Android仿QQ列表左滑删除操作  Laravel如何自定义分页视图？（Pagination示例）  Laravel如何使用Sanctum进行API认证？（SPA实战）  Laravel Eloquent访问器与修改器是什么_Laravel Accessors & Mutators数据处理技巧  哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？  Laravel如何生成和使用数据填充？（Seeder和Factory示例）  JS碰撞运动实现方法详解  英语简历制作免费网站推荐,如何将简历翻译成英文？  HTML 中如何正确使用模板变量为元素的 name 属性赋值  高性价比服务器租赁——企业级配置与24小时运维服务  QQ浏览器网页版登录入口 个人中心在线进入  高端云建站费用究竟需要多少预算？